<template>
  <div class="spray">
    
    <!-- header -->
    <!--<carnt-header :text="title" backPage="index">

      <span slot="leftHeader" class="cityChoose">
      <router-link to="/chooseCity">
        <span style="color:#fff;">{{ cityName }}</span>
      </router-link>
      </span>
      <div slot="rightHeader">
        <div class="forIcon" @click="question">
          <i class="ask"></i>
        </div>
        <div class="forIcon" @click="goCustomerService">
        <a href="javascript:;">
          <i class="service"></i>
        </a>

        </div>
      </div>
    </carnt-header>
    -->
    <!-- 当前车辆信息 -->
    <!--<section class="setMyCar" @click="toChooseCar">
      <div class="gettingCarInfo" v-if="getCarId == ''">{{titleMess}}</div>
      <div v-if="getCarId !== ''">
        <div class="picBox">
          <div>
            <img :src="getDefaultCatAllInfo.CAR_LOGO_URL + getDefaultCatAllInfo.SICON" :alt="getDefaultCatAllInfo.BRAND">
          </div>
        </div>
           <div class="carInfo">
            <h3>{{ getDefaultCatAllInfo.LICENCE }}</h3>
            <p :class="{noCard:noLogin}">{{ getDefaultCatAllInfo.BRAND + '_' + getDefaultCatAllInfo.SET + '_' + getDefaultCatAllInfo.MODEL }}</p>
          </div>
        <div class="carArrow"></div>
      </div>
    </section>-->
    <section class="myTab">
    	<div class="tabWrap">
    		<span :class='{active:myTab==1}' @click="changeTab(1)">项目</span>
    		<span :class='{active:myTab==2}' @click="changeTab(2)">详情</span>
    		<span :class='{active:myTab==3}' @click="changeTab(3)">评价</span>
    		<span :class='{active:myTab==4}' @click="changeTab(4)">商家</span>
    	</div>
    </section>
    <div class="wrap" v-if="myTab == 1">
        <div class="header_info">
          <div class="tips">已为您推荐最近的门店，点击[换店]可查找最低保养</div>

          <div class="bar bar1"> <img src="../assets/img/chooseCar/checked.png"> 一汽丰田兴业店  <span class="btn-h" @click="goShop">换店</span></div>

          <div class="bar bar2" @click="goSelectCar"> <img src="../assets/img/chooseCar/checked.png"> {{carName?carName:'请选择车型'}}  <span class="btn-h">修改</span></div>

          <div class="info_juan">
              <span>领￥12</span>
              <span>领￥24</span>
          </div>

          <div class="info_jian">
              <img src="../assets/img/chooseCar/icon1.png">
              一副减50;两幅减120;第三幅免费
          </div>

        </div>

        <section class="changeModel">
          <div>
            <span @click="changeModel(1)" :class='{active: modelType== 2}'>视图模式</span>
            <span @click="changeModel(2)" :class='{active: modelType== 1}'>文字模式</span>
          </div>
        </section>
        <!-- 文字模式 -->

        <section class="textModel" v-if="modelType == 1">
          
                <p class="tit" @click="changeModel2(1)" :class="{active: modelType2 == 1}">车头车尾 <span class="count" v-if="count1">{{count1}}</span></p>
                
                  <div class="model"  :style="{height: modelType2 == 1 ? '3.2rem': '0' }">
                    <div class="item" @click="addParts('C')" :class="{active: (hasSelectParts.indexOf('C') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.C.SERV_DETAIL_NAME}}
                      <span>￥{{banpenData2.A.PRICE}}</span>
                      <del>￥{{banpenData2.A.ORIGINAL_PRICE}}</del>
                    </div>
                    <div class="item" @click="addParts('B')" :class="{active: (hasSelectParts.indexOf('B') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.B.SERV_DETAIL_NAME}}
                      <span>￥{{banpenData2.B.PRICE}}</span>
                      <del>￥{{banpenData2.B.ORIGINAL_PRICE}}</del>
                    </div>
                    <div class="item" @click="addParts('K')" :class="{active: (hasSelectParts.indexOf('K') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.K.SERV_DETAIL_NAME}}
                      <span>￥{{banpenData2.K.PRICE}}</span>
                      <del>￥{{banpenData2.K.ORIGINAL_PRICE}}</del>
                    </div>
                    <div class="item" @click="addParts('M')" :class="{active: (hasSelectParts.indexOf('M') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.M.SERV_DETAIL_NAME}}
                      <span>￥{{banpenData2.M.PRICE}}</span>
                      <del>￥{{banpenData2.M.ORIGINAL_PRICE}}</del>
                    </div>
                  </div>
              

                <p class="tit" @click="changeModel2(2)" :class="{active: modelType2 == 2}">左侧 <span class="count" v-if="count2">{{count2}}</span></p>
                <div class="model" :style="{height: modelType2 == 2 ? '8.8rem': '0' }">
                  <div class="item" @click="addParts('O')" :class="{active: (hasSelectParts.indexOf('O') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.O.SERV_DETAIL_NAME}}
                <span>￥{{banpenData2.O.PRICE}}</span>
                    <del>￥{{banpenData2.O.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('E')" :class="{active: (hasSelectParts.indexOf('E') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.E.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.E.PRICE}}</span>
                    <del>￥{{banpenData2.E.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('G')" :class="{active: (hasSelectParts.indexOf('G') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.G.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.G.PRICE}}</span>
                    <del>￥{{banpenData2.G.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('H')" :class="{active: (hasSelectParts.indexOf('H') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.H.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.H.PRICE}}</span>
                    <del>￥{{banpenData2.H.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('L')" :class="{active: (hasSelectParts.indexOf('L') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.L.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.L.PRICE}}</span>
                    <del>￥{{banpenData2.L.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('S')" :class="{active: (hasSelectParts.indexOf('S') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.S.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.S.PRICE}}</span>
                    <del>￥{{banpenData2.S.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('T')" :class="{active: (hasSelectParts.indexOf('T') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.T.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.T.PRICE}}</span>
                    <del>￥{{banpenData2.T.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('U')" :class="{active: (hasSelectParts.indexOf('U') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.U.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.U.PRICE}}</span>
                    <del>￥{{banpenData2.U.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('P')" :class="{active: (hasSelectParts.indexOf('P') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.P.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.P.PRICE}}</span>
                    <del>￥{{banpenData2.P.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('Y')" :class="{active: (wheelSelectParts.indexOf('Y') !== -1)}">
                    {{banpenData2.Y.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.Y.PRICE}}</span>
                    <del>￥{{banpenData2.Y.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('a')" :class="{active: (wheelSelectParts.indexOf('a') !== -1)}">
                    {{banpenData2.a.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.a.PRICE}}</span>
                    <del>￥{{banpenData2.a.ORIGINAL_PRICE}}</del>
                  </div>
                </div>

                <p class="tit" @click="changeModel2(3)" :class="{active: modelType2 == 3}">右侧 <span class="count" v-if="count3">{{count3}}</span></p>
                <div class="model" :style="{height: modelType2 == 3 ? '8.8rem': '0' }">
                  <div class="item" @click="addParts('N')" :class="{active: (hasSelectParts.indexOf('N') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.N.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.N.PRICE}}</span>
                    <del>￥{{banpenData2.N.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('D')" :class="{active: (hasSelectParts.indexOf('D') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.D.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.D.PRICE}}</span>
                    <del>￥{{banpenData2.D.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('F')" :class="{active: (hasSelectParts.indexOf('F') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.F.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.F.PRICE}}</span>
                    <del>￥{{banpenData2.F.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('I')" :class="{active: (hasSelectParts.indexOf('I') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.I.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.I.PRICE}}</span>
                    <del>￥{{banpenData2.I.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('J')" :class="{active: (hasSelectParts.indexOf('J') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.J.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.J.PRICE}}</span>
                    <del>￥{{banpenData2.J.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('V')" :class="{active: (hasSelectParts.indexOf('V') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.V.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.V.PRICE}}</span>
                    <del>￥{{banpenData2.V.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('W')" :class="{active: (hasSelectParts.indexOf('W') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.W.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.W.PRICE}}</span>
                    <del>￥{{banpenData2.W.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('X')" :class="{active: (hasSelectParts.indexOf('X') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.X.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.X.PRICE}}</span>
                    <del>￥{{banpenData2.X.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('Q')" :class="{active: (hasSelectParts.indexOf('Q') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.Q.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.Q.PRICE}}</span>
                    <del>￥{{banpenData2.Q.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('b')" :class="{active: (wheelSelectParts.indexOf('b') !== -1)}">
                    {{banpenData2.b.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.b.PRICE}}</span>
                    <del>￥{{banpenData2.b.ORIGINAL_PRICE}}</del>
                  </div>
                  <div class="item" @click="addParts('Z')" :class="{active: (wheelSelectParts.indexOf('Z') !== -1)}">
                    {{banpenData2.Z.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.Z.PRICE}}</span>
                    <del>￥{{banpenData2.Z.ORIGINAL_PRICE}}</del>
                  </div>
                </div>

                <p class="tit" @click="changeModel2(4)" :class="{active: modelType2 == 4}">车顶 <span class="count" v-if="count4">{{count4}}</span></p>
                <div class="model" :style="{height: modelType2 == 4 ? '.8rem': '0' }">
                  <div class="item" @click="addParts('A')" :class="{active: (hasSelectParts.indexOf('A') !== -1 || hasSelectParts.indexOf('ALL') !== -1)}"> {{banpenData2.A.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.A.PRICE}}</span>
                    <del>￥{{banpenData2.A.ORIGINAL_PRICE}}</del>
                  </div>
                  
                
                </div>

                <p class="tit" @click="changeModel2(5)" :class="{active: modelType2 == 5}">整车 <span class="count" v-if="count5">{{count5}}</span></p>
                <div class="model" :style="{height: modelType2 == 5 ? '.8rem': '0' }">
                  <div class="item" @click="addParts('ALL')" :class="{active: (hasSelectParts.indexOf('ALL') !== -1)}">
                    {{banpenData2.ALL.SERV_DETAIL_NAME}}
                    <span>￥{{banpenData2.ALL.PRICE}}</span>
                    <del>￥{{banpenData2.ALL.ORIGINAL_PRICE}}</del>
                  </div>
                </div>

          <div></div>
        </section>

        <!-- 视图模式 -->
        <section class="chooseParts" ref="chooseParts" v-if="modelType == 2">
          <div class="textFront">前</div>
          <!-- 两厢车 -->
          <div class="mainChooseParts" v-if="carType === '2'">
            <img src="../assets/img/spray/defaultBgTouch.png" usemap="#Map" class="touchImg">
            <map name="Map">
              <!-- 左侧下裙1 --><area shape="poly" @click="addParts('O')" coords="8,213,8,492,49,508,50,208" href="javascript:;">
              <!-- 左前翼子板2 --><area shape="poly" @click="addParts('E')" coords="60,214,142,218,134,155,131,137,126,110,120,95,112,79,90,67,80,61,41,83,65,91,75,96,84,102,86,105,93,109,98,114,103,129,106,139,107,152,98,169,91,179,79,191,67,197,57,202" href="javascript:;">
              <!-- 左前门3 --><area shape="poly" @click="addParts('G')" coords="59,387,147,393,141,224,58,221" href="javascript:;">
              <!-- 左后门4 --><area shape="poly" @click="addParts('H')" coords="57,393,148,397,149,536,122,517,108,507,90,502,76,494,61,488,58,485" href="javascript:;">
              <!-- 左侧后翼子板5 --><area shape="poly" @click="addParts('L')" coords="54,508,63,513,77,518,89,524,95,526,98,538,102,547,105,553,106,565,108,576,108,583,104,595,89,609,97,614,111,626,122,640,134,649,145,653,148,653,148,613,149,573,148,547,121,525,102,512,76,500,58,494" href="javascript:;">
              <!-- 左侧A柱6 --><area shape="poly" @click="addParts('S')" coords="220,386,243,384,234,346,226,307,214,275,202,242,188,214,173,195,154,186,149,220,168,254,175,273,185,290,195,307,203,334" href="javascript:;">
              <!-- 左侧B柱7 --><area shape="poly" @click="addParts('T')" coords="155,375,216,387,215,407,155,423" href="javascript:;">
              <!-- 左侧C柱8 --><area shape="poly" @click="addParts('U')" coords="154,566,153,658,172,650,189,636,203,615,214,602,221,598,233,571,240,532,243,443,243,409,220,409,215,446,213,471,211,487,204,511,192,533,178,551,169,558" href="javascript:;">

              <!-- 前保险杠9 --><area shape="poly" @click="addParts('C')" coords="253,63,272,48,292,34,313,31,341,26,369,26,386,30,409,34,422,43,433,49,441,58,450,65,449,56,444,41,431,29,424,20,405,13,390,7,374,2,328,2,303,8,297,12,278,22,267,28,260,38" href="javascript:;">
              <!-- 前引擎盖10 --><area shape="poly" @click="addParts('B')" coords="252,74,267,67,277,63,289,59,293,49,298,45,307,51,316,50,329,49,341,45,367,46,383,48,397,48,402,47,407,47,413,59,427,60,440,69,448,74,452,204,426,192,410,185,391,183,372,180,343,178,329,181,301,184,276,188,262,198,247,205" href="javascript:;">
              <!-- 左后视镜11 --><area shape="poly" @click="addParts('P')" coords="241,143,242,157,233,161,234,176,226,183,212,185,196,183,188,177,186,172,183,162,194,154,205,148,232,149" href="javascript:;">
              <!-- 右后视镜12 --><area shape="poly" @click="addParts('Q')" coords="460,145,460,157,466,162,468,177,474,186,493,185,503,182,514,176,517,171,517,161,498,150,484,151" href="javascript:;">
              <!-- 车顶13 --><area shape="poly" @click="addParts('A')" coords="274,313,316,303,350,302,373,300,408,308,428,315,428,380,426,428,427,485,427,505,383,516,354,519,335,517,311,514,291,509,282,505" href="javascript:;">
              <!-- 车后盖14 --><area shape="poly" @click="addParts('K')" coords="265,595,297,604,330,610,370,610,407,607,420,602,442,592,440,614,435,637,433,650,427,657,398,664,372,668,345,669,316,667,290,664,278,660,268,627" href="javascript:;">

              <!-- 后保险杠15 --><area shape="poly" @click="addParts('M')" coords="268,657,280,663,294,667,317,673,350,674,369,674,388,671,408,668,422,666,429,661,441,665,441,693,426,694,409,693,374,696,343,694,318,694,292,694,275,694,261,694" href="javascript:;">

              <!-- 右侧下裙16 --><area shape="poly" @click="addParts('N')" coords="652,208,691,216,690,492,653,507" href="javascript:;">
              <!-- 右前翼子板17 --><area shape="poly" @click="addParts('D')" coords="658,82,626,60,607,65,591,78,581,92,577,103,575,115,568,133,567,155,563,177,562,191,561,209,559,219,643,214,643,197,629,194,619,183,610,181,597,168,596,164,594,159,595,148,594,141,595,129,604,114,610,103,615,101,634,94" href="javascript:;">
              <!-- 右前门18 --><area shape="poly" @click="addParts('F')" coords="558,223,641,219,644,386,553,390" href="javascript:;">
              <!-- 右后门19 --><area shape="poly" @click="addParts('I')" coords="553,397,641,393,643,487,605,502,591,509,572,522,553,534" href="javascript:;">
              <!-- 右侧后翼子板20 --><area shape="poly" @click="addParts('J')" coords="552,654,553,545,582,524,598,513,624,501,639,494,643,495,644,513,628,515,622,522,609,527,605,532,601,540,596,557,594,573,600,592,604,599,611,607,602,612,587,625,577,637,566,643" href="javascript:;">
              <!-- 右侧A柱21 --><area shape="poly" @click="addParts('V')" coords="544,190,553,224,540,249,531,264,518,285,509,306,500,319,495,336,492,356,487,374,481,392,464,390,463,377,466,343,474,309,487,265,502,235" href="javascript:;">
              <!-- 右侧B柱22 --><area shape="poly" @click="addParts('W')" coords="546,369,546,426,487,411,483,394" href="javascript:;">
              <!-- 右侧C柱23 --><area shape="poly" @click="addParts('X')" coords="480,412,459,408,461,444,460,535,475,596,489,611,507,627,518,641,533,653,546,663,547,567,533,559,523,547,503,516,497,499" href="javascript:;">


              <!-- 左前轮 --><area shape="poly" @click="addParts('Y')" coords="33,108,48,105,60,127,82,117,89,128,69,147,87,160,80,176,62,163,53,185,32,181,40,157,15,154,14,137,34,135" href="javascript:;">
              <!-- 左后轮 --><area shape="poly" @click="addParts('a')" coords="50,527,36,531,37,555,17,555,15,573,36,579,34,602,51,606,58,587,80,599,90,587,73,573,93,554,83,539,64,550" href="javascript:;">
              <!-- 右后轮 --><area shape="poly" @click="addParts('b')" coords="619,539,637,552,648,529,663,532,662,556,683,557,684,575,662,579,668,601,651,607,644,587,629,599,614,585,629,566,610,552" href="javascript:;">
              <!-- 右前轮 --><area shape="poly" @click="addParts('Z')" coords="620,114,640,123,647,104,663,106,661,134,684,131,685,147,664,153,667,178,653,182,636,161,625,177,610,165,630,147,608,131" href="javascript:;">
            </map>
            <img src="../assets/img/spray/defaultBg.png" >
            <!-- 两厢车左 -->
            <div class="spray_two_l_1 spray_part" v-if="hasSelectParts.indexOf('O') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-l-1.png" alt=""></div>
            <div class="spray_two_l_2 spray_part" v-if="hasSelectParts.indexOf('E') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-l-2.png" alt=""></div>
            <div class="spray_two_l_3 spray_part" v-if="hasSelectParts.indexOf('G') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-l-3.png" alt=""></div>
            <div class="spray_two_l_4 spray_part" v-if="hasSelectParts.indexOf('H') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-l-4.png" alt=""></div>
            <div class="spray_two_l_5 spray_part" v-if="hasSelectParts.indexOf('L') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-l-5.png" alt=""></div>
            <div class="spray_two_l_6 spray_part" v-if="hasSelectParts.indexOf('S') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-l-6.png" alt=""></div>
            <div class="spray_two_l_7 spray_part" v-if="hasSelectParts.indexOf('T') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-l-7.png" alt=""></div>
            <div class="spray_two_l_8 spray_part" v-if="hasSelectParts.indexOf('U') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-l-8.png" alt=""></div>
            <!-- 两厢中中 -->
            <div class="spray_two_m_1 spray_part" v-if="hasSelectParts.indexOf('C') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-1.png" alt=""></div>
            <div class="spray_two_m_2 spray_part" v-if="hasSelectParts.indexOf('B') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-2.png" alt=""></div>
            <div class="spray_two_m_3 spray_part" v-if="hasSelectParts.indexOf('P') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-3.png" alt=""></div>
            <div class="spray_two_m_4 spray_part" v-if="hasSelectParts.indexOf('Q') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-4.png" alt=""></div>
            <div class="spray_two_m_5 spray_part" v-if="hasSelectParts.indexOf('A') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-5.png" alt=""></div>
            <div class="spray_two_m_6 spray_part" v-if="hasSelectParts.indexOf('K') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-6.png" alt=""></div>
            <div class="spray_two_m_7 spray_part" v-if="hasSelectParts.indexOf('M') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-7.png" alt=""></div>
            <!-- 两厢车右 -->
            <div class="spray_two_r_1 spray_part" v-if="hasSelectParts.indexOf('N') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-r-1.png" alt=""></div>
            <div class="spray_two_r_2 spray_part" v-if="hasSelectParts.indexOf('D') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-r-2.png" alt=""></div>
            <div class="spray_two_r_3 spray_part" v-if="hasSelectParts.indexOf('F') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-r-3.png" alt=""></div>
            <div class="spray_two_r_4 spray_part" v-if="hasSelectParts.indexOf('I') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-r-4.png" alt=""></div>
            <div class="spray_two_r_5 spray_part" v-if="hasSelectParts.indexOf('J') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-r-5.png" alt=""></div>
            <div class="spray_two_r_6 spray_part" v-if="hasSelectParts.indexOf('V') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-r-6.png" alt=""></div>
            <div class="spray_two_r_7 spray_part" v-if="hasSelectParts.indexOf('W') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-r-7.png" alt=""></div>
            <div class="spray_two_r_8 spray_part" v-if="hasSelectParts.indexOf('X') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-two-r-8.png" alt=""></div>
            <!-- 轮子 -->
            <div class="wheel_two_l_1 spray_part" v-if="wheelSelectParts.indexOf('Y') !== -1"><img src="../assets/img/spray/wheel-l.png" alt=""></div>
            <div class="wheel_two_l_2 spray_part" v-if="wheelSelectParts.indexOf('a') !== -1"><img src="../assets/img/spray/wheel-l.png" alt=""></div>
            <div class="wheel_two_r_1 spray_part" v-if="wheelSelectParts.indexOf('Z') !== -1"><img src="../assets/img/spray/wheel-r.png" alt=""></div>
            <div class="wheel_two_r_2 spray_part" v-if="wheelSelectParts.indexOf('b') !== -1"><img src="../assets/img/spray/wheel-r.png" alt=""></div>
          </div>

          <!-- 三厢 -->
          <div class="mainChooseParts" v-else-if="carType === '1'">
            <img src="../assets/img/spray/defaultBgTouch1.png" usemap="#Map1" class="touchImg">
            <map name="Map1">

              <!-- 左侧下裙1 --><area shape="poly" @click="addParts('O')" coords="6,233,40,222,38,522,5,504" href="javascript:;">
              <!-- 左前翼子板2 --><area shape="poly" @click="addParts('E')" coords="33,88,67,64,108,78,117,104,120,120,121,152,124,184,129,218,127,234,48,232,48,211,75,204,89,191,99,175,103,153,97,131,90,120,73,105,54,95" href="javascript:;">
              <!-- 左前门3 --><area shape="poly" @click="addParts('G')" coords="49,237,128,240,134,408,72,402,47,406" href="javascript:;">
              <!-- 左后门4 --><area shape="poly" @click="addParts('H')" coords="48,410,134,413,136,562,114,546,80,527,67,517,47,513" href="javascript:;">
              <!-- 左侧后翼子板5 --><area shape="poly" @click="addParts('L')" coords="47,519,61,524,82,533,96,544,135,572,134,720,113,717,78,636,92,625,102,599,101,581,93,561,80,547,47,535" href="javascript:;">
              <!-- 左侧A柱6 --><area shape="poly" @click="addParts('S')" coords="144,242,153,212,186,239,202,273,215,306,225,348,230,383,220,414,208,415,197,375,186,332,167,292" href="javascript:;">
              <!-- 左侧B柱7 --><area shape="poly" @click="addParts('T')" coords="139,384,202,412,203,423,138,445" href="javascript:;">
              <!-- 左侧C柱8 --><area shape="poly" @click="addParts('U')" coords="138,597,139,634,175,611,194,582,207,539,214,513,222,484,223,458,226,433,219,421,210,420,201,431,196,461,190,479,183,505,174,543,157,572" href="javascript:;">

              <!-- 前保险杠9 --><area shape="poly" @click="addParts('C')" coords="243,66,255,39,273,22,299,10,309,7,315,5,347,3,375,3,395,8,415,13,427,23,451,41,456,54,456,72,439,57,430,52,421,45,408,40,392,37,377,34,357,31,325,30,305,36,289,41,269,50" href="javascript:;">
              <!-- 前引擎盖10 --><area shape="poly" @click="addParts('B')" coords="240,221,255,209,275,201,305,197,341,191,367,193,382,195,406,201,424,205,443,212,459,221,456,177,456,144,454,105,454,78,443,74,431,68,424,66,416,59,410,60,409,53,408,49,405,49,399,52,386,52,349,50,312,53,298,53,294,51,288,51,283,59,277,63,253,71,244,78" href="javascript:;">
              <!-- 左后视镜11 --><area shape="poly" @click="addParts('P')" coords="232,156,232,169,225,173,223,187,220,198,207,202,185,198,174,194,170,184,170,175,176,167,183,166,192,163,202,163,216,161" href="javascript:;">
              <!-- 右后视镜12 --><area shape="poly" @click="addParts('Q')" coords="476,196,492,199,512,195,521,193,526,185,524,172,516,166,506,162,495,161,484,162,466,154,467,169,466,156" href="javascript:;">
              <!-- 车顶13 --><area shape="poly" @click="addParts('A')" coords="268,336,291,327,328,323,369,324,397,328,417,333,430,339,432,364,432,405,430,449,431,538,413,548,394,553,374,553,347,556,315,555,295,550,279,547,272,540,271,448,273,401" href="javascript:;">
              <!-- 车后盖14 --><area shape="poly" @click="addParts('K')" coords="254,638,277,644,303,653,332,653,369,656,416,650,425,647,448,636,431,705,358,716,327,718,296,713,274,709,262,674" href="javascript:;">
              <!-- 后保险杠15 --><area shape="poly" @click="addParts('M')" coords="261,709,267,710,292,718,325,722,361,724,395,720,420,715,436,707,450,719,435,732,404,745,367,746,327,746,296,740,271,735,253,720" href="javascript:;">

              <!-- 右侧下裙16 --><area shape="poly" @click="addParts('N')" coords="662,522,694,513,694,239,658,222" href="javascript:;">
              <!-- 右前翼子板17 --><area shape="poly" @click="addParts('D')" coords="572,233,651,231,650,212,627,204,610,194,606,185,599,168,598,151,602,133,611,119,628,107,644,102,665,89,634,66,609,72,593,80,587,89,577,133" href="javascript:;">
              <!-- 右前门18 --><area shape="poly" @click="addParts('F')" coords="571,239,652,236,655,403,629,403,567,411" href="javascript:;">
              <!-- 右后门19 --><area shape="poly" @click="addParts('I')" coords="566,561,588,547,607,533,633,521,655,513,653,408,569,417" href="javascript:;">
              <!-- 右侧后翼子板20 --><area shape="poly" @click="addParts('J')" coords="566,722,588,698,598,681,622,639,602,604,599,588,602,572,613,558,636,545,655,534,656,519,636,525,617,534,602,542,565,573" href="javascript:;">
              <!-- 右侧A柱21 --><area shape="poly" @click="addParts('V')" coords="482,413,494,413,505,370,527,307,534,290,549,258,554,245,543,211,515,236,498,276,489,306,479,337,472,373" href="javascript:;">
              <!-- 右侧B柱22 --><area shape="poly" @click="addParts('W')" coords="560,385,500,411,495,427,561,442" href="javascript:;">
              <!-- 右侧C柱23 --><area shape="poly" @click="addParts('X')" coords="559,634,558,605,545,578,536,558,523,531,510,503,501,467,492,427,488,421,480,423,470,465,480,515,491,550,511,598" href="javascript:;">

              <!-- 左前轮 --><area shape="poly" @click="addParts('Y')" coords="30,123,34,147,14,147,11,164,33,169,29,190,48,196,56,176,75,184,84,175,68,159,85,143,77,130,62,137,45,117" href="javascript:;">
              <!-- 左后轮 --><area shape="poly" @click="addParts('a')" coords="35,560,48,557,58,578,75,564,86,579,67,592,84,612,78,624,57,614,46,630,31,626,34,605,14,602,16,582,34,583" href="javascript:;">
              <!-- 右后轮 --><area shape="poly" @click="addParts('b')" coords="623,565,643,575,651,554,667,560,663,583,685,581,685,600,664,604,670,622,651,630,643,611,628,622,616,610,633,595,612,577" href="javascript:;">
              <!-- 右前轮 --><area shape="poly" @click="addParts('Z')" coords="684,147,686,166,663,170,668,189,649,195,644,174,627,186,617,177,631,157,614,142,623,129,639,141,649,121,667,125,664,144" href="javascript:;">
            </map>
            <img src="../assets/img/spray/defaultBg1.png" >
            <!-- 三厢车左 -->
            <div class="spray_l_1 spray_part" v-if="hasSelectParts.indexOf('O') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-l-1.png" alt=""></div>
            <div class="spray_l_2 spray_part" v-if="hasSelectParts.indexOf('E') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-l-2.png" alt=""></div>
            <div class="spray_l_3 spray_part" v-if="hasSelectParts.indexOf('G') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-l-3.png" alt=""></div>
            <div class="spray_l_4 spray_part" v-if="hasSelectParts.indexOf('H') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-l-4.png" alt=""></div>
            <div class="spray_l_5 spray_part" v-if="hasSelectParts.indexOf('L') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-l-5.png" alt=""></div>
            <div class="spray_l_6 spray_part" v-if="hasSelectParts.indexOf('S') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-l-6.png" alt=""></div>
            <div class="spray_l_7 spray_part" v-if="hasSelectParts.indexOf('T') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-l-7.png" alt=""></div>
            <div class="spray_l_8 spray_part" v-if="hasSelectParts.indexOf('U') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-l-8.png" alt=""></div>
            <!-- 三厢中中 -->
            <div class="spray_m_1 spray_part" v-if="hasSelectParts.indexOf('C') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-1.png" alt=""></div>
            <div class="spray_m_2 spray_part" v-if="hasSelectParts.indexOf('B') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-2.png" alt=""></div>
            <div class="spray_m_3 spray_part" v-if="hasSelectParts.indexOf('P') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-3.png" alt=""></div>
            <div class="spray_m_4 spray_part" v-if="hasSelectParts.indexOf('Q') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-4.png" alt=""></div>
            <div class="spray_m_5 spray_part" v-if="hasSelectParts.indexOf('A') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-5.png" alt=""></div>
            <div class="spray_m_6 spray_part" v-if="hasSelectParts.indexOf('K') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-6.png" alt=""></div>
            <div class="spray_m_7 spray_part" v-if="hasSelectParts.indexOf('M') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-m-7.png" alt=""></div>
            <!-- 三厢车右 -->
            <div class="spray_r_1 spray_part" v-if="hasSelectParts.indexOf('N') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-r-1.png" alt=""></div>
            <div class="spray_r_2 spray_part" v-if="hasSelectParts.indexOf('D') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-r-2.png" alt=""></div>
            <div class="spray_r_3 spray_part" v-if="hasSelectParts.indexOf('F') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-r-3.png" alt=""></div>
            <div class="spray_r_4 spray_part" v-if="hasSelectParts.indexOf('I') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-r-4.png" alt=""></div>
            <div class="spray_r_5 spray_part" v-if="hasSelectParts.indexOf('J') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-r-5.png" alt=""></div>
            <div class="spray_r_6 spray_part" v-if="hasSelectParts.indexOf('V') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-r-6.png" alt=""></div>
            <div class="spray_r_7 spray_part" v-if="hasSelectParts.indexOf('W') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-r-7.png" alt=""></div>
            <div class="spray_r_8 spray_part" v-if="hasSelectParts.indexOf('X') !== -1 || hasSelectParts.indexOf('ALL') !== -1"><img src="../assets/img/spray/spray-r-8.png" alt=""></div>
            <!-- 轮子 -->
            <div class="wheel_l_1 spray_part" v-if="wheelSelectParts.indexOf('Y') !== -1"><img src="../assets/img/spray/wheel-l.png" alt=""></div>
            <div class="wheel_l_2 spray_part" v-if="wheelSelectParts.indexOf('a') !== -1"><img src="../assets/img/spray/wheel-l.png" alt=""></div>
            <div class="wheel_r_1 spray_part" v-if="wheelSelectParts.indexOf('Z') !== -1"><img src="../assets/img/spray/wheel-r.png" alt=""></div>
            <div class="wheel_r_2 spray_part" v-if="wheelSelectParts.indexOf('b') !== -1"><img src="../assets/img/spray/wheel-r.png" alt=""></div>
          </div>
        </section>
        <!-- 全选 -->
        <div class="selectAll bottomWord">

            <span class="colorful orangeSpan">
              惠
            </span>
            <span class="allFanWord">
              全车翻新
            </span>
            <div class="c">
              <input type="checkbox" id="cx1" v-model="allSelect" @change="changeAllChooseBtn">
              <label for="cx1"></label>
            </div>

        </div>
      <!-- 优惠信息 -->
      <!-- <div class="discountInfo bottomWord" v-if="showActDes">
        <span class="colorful redSpan">
          减
        </span>
        <span>{{ actInfo.COMBINATION_SPRAY_EXPLAIN }}</span>
        <br>
      </div> -->

    </div>
   
    <!-- 详情 -->
    <div class="wrap2" v-if="myTab == 2">
      <h3>图文详情</h3>
      <img src="../assets/img/chooseCar/temp.png" width="100%">
      <h3>平台活动</h3>
      <img src="../assets/img/chooseCar/temp.png" width="100%">
    </div>

    <div class="wrap3" v-if="myTab == 3">
      <img src="../assets/img/chooseCar/temp2.png" width="100%">
      <div class="box">
        <span>全部</span>
        <span>好评(22)</span>
        <span>差评</span>
        <span>好评(222)</span>
        <span>好评(111)</span>
        <span>好评(444)</span>
        <span>好评(22)</span>
      </div>
      <div class="evaluate"  v-for="i in evaluateList" :key="i.id">
          <div class="e-header">
            Jassikeeas
            <span class="leval">砖石会员</span>
            <span class="time">2018-01-06</span>
          </div>
          <div class="e-info">
            <span>车型: 别克 昂科威</span>
            <span>服务： 喷漆</span>
            <span>花费： ￥688 (省￥99)</span>
          </div>
          <div class="e-content">
            宝贝很满意，质量很好，值得拥有。宝贝很满意，质量很好，值得拥有。宝贝很满意，质量很好，值得拥有。宝贝很满意，质量很好，值得拥有。宝贝很满意，质量很好，值得拥有。宝贝很满意，质量很好，值得拥有。宝贝很满意，质量很好，值得拥有
          </div>
          <div class="e-reply">
            通仔回复：老铁，双击666.一人我饮酒醉。。老铁，双击666.一人我饮酒醉。老铁，双击666.一人我饮酒醉老铁，双击666.一人我饮酒醉。老铁，双击666.一人我饮酒醉。老铁，双击666.一人我饮酒醉。老铁，双击666.一人我饮酒醉
          </div>
          <div class="e-img">
            <img src="../assets/img/chooseCar/temp3.png">
            <img src="../assets/img/chooseCar/temp3.png">
            <img src="../assets/img/chooseCar/temp3.png">
            <img src="../assets/img/chooseCar/temp3.png">
          </div>
          <div class="e-shop">
            深圳犀利赵方4S店
          </div>
      </div>
    </div>

    <div class="wrap4" v-if="myTab == 4">
       <h3>商家信息</h3>
       <div class="img-group">
         <ul>
           <li><img src="../assets/img/chooseCar/temp3.png"></li>
           <li><img src="../assets/img/chooseCar/temp3.png"></li>
           <li><img src="../assets/img/chooseCar/temp3.png"></li>
           <li><img src="../assets/img/chooseCar/temp3.png"></li>
           <li><img src="../assets/img/chooseCar/temp3.png"></li>
           <li><img src="../assets/img/chooseCar/temp3.png"></li>
         </ul>
       </div>
       <div class="info1">
         <img src="../assets/img/chooseCar/temp5.png">
         一汽丰田兴业点
       </div>
       <div class="info1">
         <img src="../assets/img/chooseCar/temp5.png">
         深圳南山区阿斯顿不稳定阿斯顿
       </div>
       <div class="info1">
         <img src="../assets/img/chooseCar/temp5.png">
         0755-2671456325
       </div>
       <div class="info1">
         <img src="../assets/img/chooseCar/temp5.png">
         营业时间：09:11-13:00
       </div>
       <div class="info1">
         <img src="../assets/img/chooseCar/temp5.png">
         商家服务
         <p>
           <span>智能保养</span>
           <span>极速钣喷</span>
           <span>洗车美容</span>
           <span>维护养护</span>
         </p>
       </div>
       <div class="info1">
         <img src="../assets/img/chooseCar/temp5.png">
         商家公告
         <p>这里可以让商家自己去放一些内容红红火火恍恍惚惚红红火火恍恍惚惚红红火火恍恍惚惚</p>
       </div>
    </div>

    <!-- 购物车详情 -->
    <transition name="listFade">
      <section class="shoppingCarList" v-if="carListShow">
        <div class="listView">
          <span class="cartviewSpcar">购物车</span>
          <a href="javascript:" class="cartviewClear" @click="clearAll">
            <span class="clearAllList">清空</span>
          </a>
        </div>
        <ul class="sclList">
          <li v-for="(item,index) in shoppingCarList" :key="index">
            <span class="cartviewLeft"><em class="cartview-5hJ9d">{{ item.SERV_DETAIL_NAME }}</em><p class="cartview-1urbT"> </p></span>
            <span class="cartviewRight">
              <del class="priceOld">￥{{ item.ORIGINAL_PRICE }}</del>
              <span class="priceNow">￥{{ item.PRICE }}</span>
            </span>
            <span class="removeList" @click="addParts(item.POSITION)"></span>
          </li>
        </ul>
      </section>
    </transition>
    <!-- 金钟罩 -->
    <transition name="maskFade">
      <div class="shoppingCarListMask" v-if="carListShow" @click="showCarList"></div>
    </transition>

    <!-- 购物车 -->
    <footer class="shoppingCar">
      <div class="carIcon" @click="showCarList">
        <div class="carIconBox" :class="{ hasGoods: shoppingCarList.length }">
          <!-- 总数 -->
          <span class="goodsNub" v-if="shoppingCarList.length">{{ shoppingCarList.length }}</span>
          <img src="../assets/img/spray/shoppingCar.png" alt="">
        </div>
      </div>
      <div class="shoopingCarDet">
        <p class="oneLine" v-if="(hasSelectParts.length == 0) && (wheelSelectParts.length == 0)">请在上方选择喷漆部位</p>
        <div class="twoLine" v-if="(hasSelectParts.length !=0) || (wheelSelectParts.length != 0)">
          <h3>总计：￥{{ needPayType2 }}</h3>
          <p>
            <span v-if="actInfo.HAS_COMBINATION_SPRAY != 0">已优惠：</span>
            <span v-else>已抵券：</span>￥{{ (Number(defaultCash) + activityRedux ).toFixed(2)}}</p>
            <!-- 优惠券抵扣 + 活动抵扣 ，活动开启文字显示以优惠，未开启显示已抵券-->
        </div>

      </div>
      <div class="toChooseTime" @click="nextFenshi">分时优惠</div>
    </footer>
    <!-- 不满足条件遮罩 -->
    <!--<div class="canClick" v-if="!canClick" @click="alertMess"></div>-->
  </div>

</template>

<script>
//左侧下裙1'O' 左前翼子板2'E' 左前门3'G' 左后门4'H' 左侧后翼子板5'L' 左侧A柱6'S' 左侧B柱7'T' 左侧C柱8'U'
//前保险杠9'C' 前引擎盖10'B' 左后视镜11'P' 右后视镜12'Q' 车顶13'A' 车后盖14'K' 后保险杠15'M'
//右侧下裙16'N' 右前翼子板17'D' 右前门18'F' 右后门19'I' 右侧后翼子板20'J' 右侧A柱21'V' 右侧B柱22'W' 右侧C柱23'X'
//左前轮24'Y' 左后轮25'a' 右后轮26'b' 右前轮27'Z'
//['O','E','G','H','L','S','T','U','C','B','P','Q','A','K','M','N','D','F','I','J','V','W','X']
// 1.登录
// 2.检查车辆，获取选择车辆信息
// 3.定位
// 4.获取部件价格等信息
// 5.点选后，保存信息
import { mapGetters } from 'vuex'
import { MessageBox, Indicator } from 'mint-ui';
import carntHeader from './commonParts/CarntHeader';
import { getCookie, setCookie } from '../assets/js/cookie'

export default {
  name: 'Spray',
  // 数据
  data () {
    return {
      evaluateList: [1,2,3], // 评价列表
      carName: '', // 车辆名称
      myTab: 1, // tab切换
      modelType: 2, // 模式
      modelType2: 0, // 文字模式的部位
      title: '极速钣喷',
      //hasGoodss:false,//购物车图标激活否？
      carListShow:false,//购物车详情显示否？
      carType:'2',// 车型 2或3厢
      allSelect:false,// 是否全车钣喷
      hasSelectParts:[],// 已选部位（仅车身）
      wheelSelectParts:[],// 已选车轮部位（全车钣喷不包括车轮）

      cityName:'定位中...',
      positionLL:'',// 经纬
      loginKey:'',
      userName:'',

      banpenData:'',// 所有钣喷部位数据
      banpenData2: {}, //  所有钣喷部位数据
      CAR_LOGO_URL:'',
      canClick:false,// 是否满足可点击的条件 false可点/true 不可
      cashList:[],// 用户名下喷漆代金券列表
      noLogin:false, //判断用户是否登录
      shouP:[],//兼容首付活动车身
      shouG:[],//兼容首付活动车轱辘
      actInfo:{},// 钣喷活动信息
      showActDes:false,// 是否展示活动说明
      defaultStore:'',// 默认商店
      defaultCash:0,// 默认代金券金额
      titleMess:"获取车辆信息中...",
      nocar:false,

      activityRedux: 0 // 活动开启后需要显示的活动优惠的价格
    }
  },
  // 计算
  computed: {

    ...mapGetters([
      'getIp',//双胜IP
      'getJumpIp',
      'getIsLocation',//取store中是否已经手动选择城市
      'getCityName',//取store中的城市名
      'getLgnLat',// 取坐标
      'getCarId',//取默认车辆id
      'getDefaultCatAllInfo',//取默认车辆所有信息
      'getPartsOfChoose',//store中的已选车身部位
      'getPartsOfChooseW'//store中的已选车轮部位
    ]),
    // 所选全部部位
    allSelectParts () {
    
      return this.hasSelectParts.concat(this.wheelSelectParts);
    },
    // 计算车头 左侧 右侧 选中数量
    count1 () {
      let list = this.allSelectParts
      // console.log(list.indexOf('ALL'))
      let count = 0
      if (list.indexOf('ALL') != -1) {
        count = 4
      } else {
        for (let i = 0; i < list.length; i++) {
          if (list[i] == 'C' || list[i] == 'B'|| list[i] == 'K' || list[i] == 'M') {
            count++
          }
        }
      }
      return count
    },
    // OEGHLSTUPYa
    count2 () {
      let list = this.allSelectParts
      let count = 0
      if (list.indexOf('ALL') != -1) {
        count = 9
        for (let i = 0; i < list.length; i++) {
          if (list[i] == 'Y' || list[i] == 'a') {
            count++
          }
        }
      } else {
        for (let i = 0; i < list.length; i++) {
          if (list[i] == 'O' || list[i] == 'E'|| list[i] == 'G' || list[i] == 'H' || list[i] == 'L' || list[i] == 'S' || list[i] == 'T' || list[i] == 'U' || list[i] == 'P' || list[i] == 'Y' || list[i] == 'a') {
            count++
          }
        }
      }
      return count
    },
    // NDFIJVWXQbZ
    count3 () {
      let list = this.allSelectParts
      let count = 0
      if (list.indexOf('ALL') != -1) {
        count = 9
        for (let i = 0; i < list.length; i++) {
          if (list[i] == 'b' || list[i] == 'Z') {
            count++
          }
        }
      } else {
        for (let i = 0; i < list.length; i++) {
          if (list[i] == 'N' || list[i] == 'D'|| list[i] == 'F' || list[i] == 'I' || list[i] == 'J' || list[i] == 'V' || list[i] == 'W' || list[i] == 'X' || list[i] == 'Q' || list[i] == 'b' || list[i] == 'Z') {
            count++
          }
        }
      }
      return count
    },
    count4 () {
      let list = this.allSelectParts
      let count = 0
      for (let i = 0; i < list.length; i++) {
        if (list[i] == 'A' || list[i] == 'ALL') {
          count++
        }
      }
      return count
    },
    count5 () {
      let list = this.allSelectParts
      let count = 0
      for (let i = 0; i < list.length; i++) {
        if (list[i] == 'ALL') {
          count++
        }
      }
      return count
    },
    // 购物车内总列表(车身 + 车轮信息)
    shoppingCarList () {
      var has = this.hasSelectParts,// 已选车身部位数组 如：[A,B,C]
          hasWheel = this.wheelSelectParts,//所有轮子数组 如：[X,Y]
          all = this.banpenData,// 所有钣喷部位数据 （请求到的数据，包含每个部位的价格）
          obj = [];// 定义购物车数组 用于模版v-for循环展示
      // 为购物车列表obj添加已选部位
      // 车身
      for (var i = 0; i < has.length; i++) {
        for (var j = 0; j < all.length; j++) {
          if (all[j].POSITION == has[i]) {
            obj.push( JSON.parse(JSON.stringify(all[j])) );
            // JSON.parse(JSON.stringify(a)) 深拷贝对象的一种方式
            // 若不深拷贝obj.push(all[j]) 则传递的是引用 计算组合优惠活动时价格会重复减
          }
        }
      }
      // 车轮
      for (var x = 0; x < hasWheel.length; x++) {
        for (var y = 0; y < all.length; y++) {
          if (all[y].POSITION == hasWheel[x]) {
            obj.push( JSON.parse(JSON.stringify(all[y])) );
          }
        }
      }
      // console.log('objx',obj)
      // 组合优惠
      var fixedParts;// 固定组合优惠部位
      var fixedCheck;// 已选部位
      // console.log(objx,obj);
      // 检查购物车内是否有全车钣喷
      function checkHasAll (obj) {
        for (var i = 0; i < obj.length; i++) {
          if (obj[i].POSITION == 'ALL') {
            return true;
          }
        }
        return false;
      }

      // 开启组合优惠
      if (this.actInfo.HAS_COMBINATION_SPRAY != 0) {
        // 1.随机组合满减
        if ( this.actInfo.HAS_COMBINATION_SPRAY == 1&&this.actInfo.HAS_SPRAY_PRICE != 1 && (!checkHasAll(obj)) ) {
          this.activityRedux = 0;// 重置优惠价格避免累加
          for (var yo = 0; yo < obj.length; yo++) {

            if (yo == 0) {
              obj[yo].PRICE = ( Number(obj[yo].PRICE) - Number(this.actInfo.ONE_RANDOM_SPRICE_DIS) );
              if ( obj[yo].PRICE < 0 ) { obj[yo].PRICE = 0; }
              this.activityRedux +=  Number(this.actInfo.ONE_RANDOM_SPRICE_DIS);// 累加需要显示的活动优惠的价格（2017-5-23）
            }
            if (yo == 1) {
              obj[yo].PRICE = ( Number(obj[yo].PRICE) - Number(this.actInfo.TWO_RANDOM_PRICE_DIS) );
              if ( obj[yo].PRICE < 0 ) { obj[yo].PRICE = 0; }
              this.activityRedux +=  Number(this.actInfo.TWO_RANDOM_PRICE_DIS);// 累加需要显示的活动优惠的价格（2017-5-23）
            }
            if (yo == 2) {
              obj[yo].PRICE = ( Number(obj[yo].PRICE) - Number(this.actInfo.THREE_RANDOM_PRICE_DIS) );
              if ( obj[yo].PRICE < 0 ) { obj[yo].PRICE = 0; }
              this.activityRedux +=  Number(this.actInfo.THREE_RANDOM_PRICE_DIS);// 累加需要显示的活动优惠的价格（2017-5-23）
            }

          }

        }
        //首付多少钱组合
        else if (this.actInfo.HAS_COMBINATION_SPRAY == 1&&this.actInfo.HAS_SPRAY_PRICE == 1 && (!checkHasAll(obj)) ) {
          this.activityRedux = 0;// 重置优惠价格避免累加
          let arr=obj;
          let that=this;
          arr=arr.sort(that.sortBy('PRICE',false));
          let arrp=[];
          let arrG=[];
          for (var yo = 0; yo < arr.length; yo++) {
            if (yo == 0) {
              if(Number(arr[yo].PRICE)<Number(this.actInfo.ONE_RANDOM_SPRICE_DIS)){
                this.activityRedux=0;
              }else{
                this.activityRedux =arr[yo].PRICE - Number(this.actInfo.ONE_RANDOM_SPRICE_DIS);// 累加需要显示的活动优惠的价格（2017-5-23）
                arr[yo].PRICE =this.actInfo.ONE_RANDOM_SPRICE_DIS;
              }
              if(arr[yo].POSITION!= 'a' &&arr[yo].POSITION!= 'b' &&arr[yo].POSITION!= 'Y'&&arr[yo].POSITION!= 'Z'){
                arrp.unshift(arr[yo].POSITION)
              }else{
                arrG.unshift(arr[yo].POSITION)
              }

            } else{
              if(arr[yo].POSITION!= 'a' &&arr[yo].POSITION!= 'b' &&arr[yo].POSITION!= 'Y'&&arr[yo].POSITION!= 'Z'){
                arrp.push(arr[yo].POSITION)
              }else{
                arrG.push(arr[yo].POSITION)
              }
            }
            console.log(arr[yo])
          }
          this.shouP=arrp;
          this.shouG=arrG;
          console.log(this.shouP);
          console.log(this.shouG);
          obj=arr;
        }
        // 2.随机组合折扣
        else if ( this.actInfo.HAS_COMBINATION_SPRAY == 2 && (!checkHasAll(obj)) ) {
          this.activityRedux = 0;// 重置优惠价格避免累加
          for (var yo = 0; yo < obj.length; yo++) {

            if (yo == 0) {
              // 随机折扣后该部位的价格（下同）
              var randomDiscount1 = ( Number(obj[yo].PRICE) * Number(this.actInfo.ONE_RANDOM_SPRICE_DIS) ).toFixed(2);
              // 累加需要显示的活动优惠的价格（2017-5-23）（下同）
              this.activityRedux += obj[yo].PRICE - randomDiscount1;
              // 赋值最终价格（下同）
              obj[yo].PRICE = randomDiscount1;
            }
            if (yo == 1) {
              var randomDiscount2 = ( Number(obj[yo].PRICE) * Number(this.actInfo.TWO_RANDOM_PRICE_DIS) ).toFixed(2);
              this.activityRedux += obj[yo].PRICE - randomDiscount2;
              obj[yo].PRICE = randomDiscount2;
            }
            if (yo == 2) {
              var randomDiscount3 = ( Number(obj[yo].PRICE) * Number(this.actInfo.THREE_RANDOM_PRICE_DIS) ).toFixed(2);
              this.activityRedux += obj[yo].PRICE - randomDiscount3;
              obj[yo].PRICE = randomDiscount3;
            }

          }

        }
        // 3.固定组合满减（包含指定所有部位则折扣）
        else if ( this.actInfo.HAS_COMBINATION_SPRAY == 3 && (!checkHasAll(obj)) ) {
          this.activityRedux = 0;// 重置优惠价格避免累加
          fixedParts = this.actInfo.FIXED_PRICE_POSTION.split('');// 指定的部位
          console.log('固定组合',fixedParts);

          fixedCheck = (function(Par,Chi){// (已选部位，指定部位) 用于检查是否命中指定固定组合优惠部位
              var ParL = Par.length,
                  ChiL = Chi.length,
                  pickArr=[];
              for (var i = 0; i < ParL; i++) {
                pickArr.push(Par[i].POSITION);
              }
              var aStr = pickArr.toString();
              for (var i = 0; i < ChiL; i++) {
                if(aStr.indexOf(Chi[i]) == -1) return false;
              }
              return true;

          }(obj,fixedParts))

          // 符合固定组合 指定部位减金额
          if (fixedCheck) {
            for (var yo = 0; yo < obj.length; yo++) {
              for (var ho = 0; ho < fixedParts.length; ho++) {
                if (obj[yo].POSITION == fixedParts[ho]) {
                  if (ho == 0) {
                    obj[yo].PRICE = ((Number(obj[yo].PRICE) - Number(this.actInfo.FIXED_SPRAY_PRICE)/fixedParts.length).toFixed(2) );// 平分固定组合减去的钱(保留两位小数)
                    if ( obj[yo].PRICE < 0 ) { obj[yo].PRICE = 0; }
                    // 累加需要显示的活动优惠的价格（2017-5-23）
                    this.activityRedux += Number(this.actInfo.FIXED_SPRAY_PRICE)/fixedParts.length;
                  }
                  if (ho == 1) {
                    obj[yo].PRICE = ((Number(obj[yo].PRICE) - Number(this.actInfo.FIXED_SPRAY_PRICE)/fixedParts.length).toFixed(2) );
                    if ( obj[yo].PRICE < 0 ) { obj[yo].PRICE = 0; }
                    // 累加需要显示的活动优惠的价格（2017-5-23）
                    this.activityRedux += Number(this.actInfo.FIXED_SPRAY_PRICE)/fixedParts.length;
                  }
                  if ( ho== 2) {
                    obj[yo].PRICE = ((Number(obj[yo].PRICE) - Number(this.actInfo.FIXED_SPRAY_PRICE)/fixedParts.length).toFixed(2) );
                    if ( obj[yo].PRICE < 0 ) { obj[yo].PRICE = 0; }
                    // 累加需要显示的活动优惠的价格（2017-5-23）
                    this.activityRedux += Number(this.actInfo.FIXED_SPRAY_PRICE)/fixedParts.length;
                  }

                }
              }
            }
          }

        }
        // 4.固定组合折扣
        else if ( this.actInfo.HAS_COMBINATION_SPRAY == 4 && (!checkHasAll(obj)) ) {
          this.activityRedux = 0;// 重置优惠价格避免累加
          fixedParts = this.actInfo.FIXED_PRICE_POSTION.split('');// 指定的部位
          // 检查是命中指定部位
          fixedCheck = (function(Par,Chi){
              var ParL = Par.length,
                  ChiL = Chi.length,
                  pickArr=[];
              for (var i = 0; i < ParL; i++) {
                pickArr.push(Par[i].POSITION);
              }
              var aStr = pickArr.toString();
              for (var i = 0; i < ChiL; i++) {
                if(aStr.indexOf(Chi[i]) == -1) return false;
              }
              return true;

          }(obj,fixedParts))// (已选部位，指定部位)

          // 符合固定组合 指定部位打折
          if (fixedCheck) {
            for (var yo = 0; yo < obj.length; yo++) {
              for (var ho = 0; ho < fixedParts.length; ho++) {
                if (obj[yo].POSITION == fixedParts[ho]) {
                  if (ho == 0) {
                    // 折扣后的金额（下同）
                    var fixedDiscount1 = ( Number(obj[yo].PRICE) * Number(this.actInfo.FIXED_SPRAY_PRICE) ).toFixed(2);
                    // 累加折扣金额（下同）
                    this.activityRedux += obj[yo].PRICE - fixedDiscount1;
                    // 赋值折扣后的金额（下同）
                    obj[yo].PRICE = fixedDiscount1;
                  }
                  if (ho == 1) {
                    var fixedDiscount2 = ( Number(obj[yo].PRICE) * Number(this.actInfo.FIXED_SPRAY_PRICE) ).toFixed(2);
                    this.activityRedux += obj[yo].PRICE - fixedDiscount2;
                    obj[yo].PRICE = fixedDiscount2;
                  }
                  if ( ho== 2) {
                    var fixedDiscount3 = ( Number(obj[yo].PRICE) * Number(this.actInfo.FIXED_SPRAY_PRICE) ).toFixed(2);
                    this.activityRedux += obj[yo].PRICE - fixedDiscount3;
                    obj[yo].PRICE = fixedDiscount3;
                  }

                }
              }
            }
          }

        }

      }

      // 全车活动
      //如果选择了全车钣喷 且 活动未开启
      if (obj.length!=0 && obj[0].POSITION == 'ALL' && this.actInfo.HAS_REFURBISHED_DIS == 1) {
        // 重新计算全车翻新价格
        // ALL价格乘折扣率
        obj[0].PRICE *= this.actInfo.REFURBISHED_DIS;
        if ( (obj[0].PRICE % 1) != 0) {
          obj[0].PRICE = obj[0].PRICE.toFixed(2);//保留两位小数
        }

      }// else do nothing

      // 返回最终obj计算结果
      return obj;
    },

    // 计算总价支付金额
    needPay () {
      var scl = this.shoppingCarList,
          allMoney = 0;

      for (var w = 0; w < scl.length; w++) {
        allMoney += Number(scl[w].PRICE);
      }
      return allMoney;
    },

    // 计算总价支付金额（减掉可用代金券后）
    needPayType2 () {
      return ((this.needPay - this.defaultCash)).toFixed(2);
      //return (typeof this.cashReduxNub);
    }
  },

  // 创建
  created () { 
  //alert(wx.miniProgram.postMessage);
  	wx.miniProgram.postMessage({ data: 'foo' })
  	// wx.miniProgram.redirectTo({
   //    url: '/pages/webview?page=1',
   //  })    
    document.title = "极速钣喷";
    sessionStorage.removeItem('platFrom'); //清除来自第三方平台信息
    this.init();
    // setCookie('loginkey',137038);
    // setCookie('name','黄继定');
    // setCookie('userName','黄继定');

    if (localStorage.getItem('carName')) {
      console.log(111)
      this.carName = localStorage.getItem('carName')
    }


  },

  mounted () {
    // 钣喷map部位 使用固定像素布局，动态计算clientWidth/750比值，使用zoom对该部位进行缩放
    var bili = document.documentElement.clientWidth/750;
    bili = bili > 1 ? 1 : bili;
    this.$refs.chooseParts.style.zoom = bili;
    //this.$refs.chooseParts.style.transform = 'scale(' + bili + ')';
    //this.$refs.chooseParts.style.transformOrigin= '0 0';
    //console.log(this.$refs.chooseParts.getBoundingClientRect().height)
    //this.$refs.chooseParts.style.height=this.$refs.chooseParts.getBoundingClientRect().height+ 'px';

    // alert(this.$route.query.a)
  },

  // keep-alive 组件激活钩子函数
  activated () {

    if (!!localStorage.getItem('localLngLat')) {// local有定位信息
      this.cityName = localStorage.getItem('cityName');
      this.positionLL = localStorage.getItem('localLngLat');
    } /*else {//百度定位
      this.getLocationPlace();
    }*/

  },
  updated() {
     // 切换tab导致zoom样式消失 重新计算
      var bili = document.documentElement.clientWidth/750;
      bili = bili > 1 ? 1 : bili;
      this.$refs.chooseParts.style.zoom = bili;
  },
  // 方法--------------------
  methods: {
    // 去换店
    goShop(){
      
    },
    goSelectCar(){
      this.$router.push('selectCar')
    },
  	// 切换TAB
  	changeTab(type) {
  		this.myTab = type

  	},
  	// 切换模式
  	changeModel(type) {
  		// console.log(this.modelType)
  		if (type == 1) {
        this.modelType = 2  			
        // var bili = document.documentElement.clientWidth/750;
        // bili = bili > 1 ? 1 : bili;
        // this.$refs.chooseParts.style.zoom = bili;

  		}else if(type == 2) {
  			this.modelType = 1
        // this.$refs.chooseParts.style.zoom = 1;
  		}

  	},
  	// 选择部位
  	changeModel2(index) {
      if (index == this.modelType2) {
        this.modelType2 = 0
      } else {
        this.modelType2 = index
      }
  	},
    //排序
    sortBy(attr,rev){
        //第二个参数没有传递 默认升序排列
        //@param attr 排序的属性 如number属性
        // @param rev true表示升序排列，false降序排序
        if(rev ==  undefined){
            rev = 1;
        }else{
            rev = (rev) ? 1 : -1;
        }

        return function(a,b){
            a = a[attr];
            b = b[attr];
            if(a < b){
                return rev * -1;
            }
            if(a > b){
                return rev * 1;
            }
            return 0;
        }
    },

    // 初始化
    init () {
      // 获取钣喷活动信息 ↓
      this.getActivityInfo();

      /*去除新钣喷去未登录去添加车辆的标志*/
      localStorage.removeItem("fromSpray");

      var _this=this;
      if (/^1[0-9]{10}$/g.test(this.$route.query.phone)) {
        // 第三方接入
        let phone=this.$route.query.phone;
        let key=this.$route.query.key;    //e10adc3949ba59abbe56e057f20f883e后台编码后的密码
        let outPort=this.$store.state.ip+"/CARNT/sprayQH/getLoginKey";
        this.$http.post(outPort,{PHONE:phone,KEY:key},{emulateJSON:true}).then(function(res){
          console.log(res.body);
          //非车网通用户进入时后台自动注册登录，前台将返回的数据存储在cookies中
          setCookie("name",res.body.USER.USERNAME);//用户名
          setCookie("loginkey",res.body.USER.USER_ID);//用户的loginkey
          setCookie("userAvatar","");
          setCookie("userName",res.body.USER.USERNAME);//用户名
          setCookie("cookies.js","1");
          let tel=res.body.USER.TEL;//用户电话
          let carNo;//默认车辆的车标
          let carId;//默认车辆的id
          if(res.body.CARS.length>0){
            for(var i=0;i<res.body.CARS.length;i++){
              if(res.body.CARS[i].CAR_ID==res.body.USER.CAR_ID){//找到用户的默认车辆
                carNo=res.body.CARS[i].LICENCE;
                carId=res.body.CARS[i].CAR_ID;
                setCookie(res.body.USER.USER_ID,carId+ escape(',') +carNo+ escape(',') +tel);
              }
            }
          }
          _this.caentCheck();
        })
      } else {
        // carnt用户
        this.caentCheck();

      }
      // 获取定位（仅在create后定位一次）
      this.getLocationPlace();
    },

    // 获取钣喷活动信息
    getActivityInfo(){
      var that = this;
      // 获取活动开启详情 ↓
      this.$http.post(
        this.getIp + "/CARNT/sprayWeb/getSprayAct",{},{emulateJSON:true}
      ).then(function(res){
        var result = res.body;
        // 修改返回数据
        // 全车开启折上折
        // 四选一随机组合 1 2 3都可以
        // 固定组合满足的话 是整体 打折/减价格 （不是单独减）
        // 弹窗不需要了
        // 活动文字依据 是否为空判断
        // 代金券很重要
        /*result = {
          STATUS_CODE:1,// 请求成功
          CASHVOL_AVL:0,// 是否可用代金券 0：不可用，1：可用 -----------Ⅰ

          HAS_REFURBISHED_DIS:"0",// 全车翻新有无折扣，0-无，1-有------------Ⅱ
          REFURBISHED_DIS:"0.8",// 全车翻新的折扣率，无折扣时为1，金额计算小数点保留至两位

          HAS_COMBINATION_SPRAY:"1",
          // 组合模式，0-不需要，1-随机组合满减模式，2随机组合折扣模式，3-固定组合满减模式，4-固定组合折扣模式

          FIXED_PRICE_POSTION:"ABb",// 固定组合位置
          FIXED_SPRAY_PRICE:".80",// 0.8固定组合喷漆的满减价格/折扣

          ONE_RANDOM_SPRICE_DIS:"50",// 0.8随机组合一副喷漆的价格/折扣（折扣/金额）
          TWO_RANDOM_PRICE_DIS:"80",// 0.75随机组合二副喷漆的价格/折扣
          THREE_RANDOM_PRICE_DIS:"120",// 0.7随机组合三副喷漆的价格/折扣

          COMBINATION_SPRAY_EXPLAIN:"第1副减50  第2幅减80  第3幅减120",//组合喷漆说明

          HAS_LEFT_OVER:0,// 是否需要显示剩余数 0-不需要，1-需要（废弃）
          LEFT_OVER:0,// 抢购剩余数，如果为-1则隐藏剩余数文字（废弃）
          OPEN_WINDOW:1,// 是否需要弹窗提醒 0：不弹，1：弹出（废弃）
          WINDOW_URL:"http://112.124.107.78/pic/icon/bp2.png",// 活动弹出背景（废弃）
          HAS_ACT:0,// 有无活动 0：无，1：有 （废弃）
          HAS_SPRAY_PRICE:0,// 首副喷漆的价格是否需要处理，0-不需要，1-需要（废弃）
          SPRAY_PRICE:"0"// 首副油漆的价格（废弃）


        };*/
        if (result.STATUS_CODE == 1) {// success

          // 处理活动说明文字（活动说明不为空且有活动开启则显示）
          if (result.COMBINATION_SPRAY_EXPLAIN !== '' && (result.HAS_REFURBISHED_DIS == 1 || result.HAS_COMBINATION_SPRAY !=0 ) ) {
            this.showActDes = true;
          }
          // 储存是否可用代金券信息
          localStorage.setItem('canUseCash',result.CASHVOL_AVL);
          sessionStorage.setItem('canUseCash',result.CASHVOL_AVL);
          // ↑ canUseCash，新增 储存所有活动信息，给分时优惠使用
          localStorage.setItem('allActInfo',JSON.stringify(result));
          that.actInfo = result;// data设置活动信息

        }else{
          MessageBox('提示', '获取活动信息失败').then(function(){
            location.reload()
          })
        }

      },function(res){

      })
    },

    // 检查车网通用户是否登录
    caentCheck () {
      // 设cookie
      setCookie("DWRSESSIONID","NHGKDTJsFN*nKuAWooNBOvK8EKl");
      setCookie("JSESSIONID","4B74F8D7BE237BCB0E3F8666C159618A");
      setCookie("flag","10");
      setCookie("name","17770272793");
      setCookie("pwd","123456");
      setCookie("loginkey","22371");
      setCookie("userAvatar","");
      setCookie("userName","17770272793");
      setCookie("223886","1547%2C%u6D59RTHK%2C17770272793"); //默认车辆cookie
      setCookie("cookies.js","1");
      // 1.是否登录
      if ( getCookie("loginkey") && getCookie("userName") ) {
        // 已登录
        this.loginKey = getCookie("loginkey");
        this.userName = getCookie("userName");
        // 获取车辆
        this.getDefaultCar();
      // 新增未登录也可操作 ↓
      } else {
      		console.log('????')
        // localStorage.setItem("carBrand","奥迪_A4L_2013款 30 TFSI 自动舒适型");
        // localStorage.setItem("icon","1418116049895.png");
        this.noLogin=true;
        if(localStorage.getItem("carBrand")&&localStorage.getItem("icon")){
          var obj={};
          obj.BRAND=localStorage.getItem("carBrand").split("_")[0];
          obj.SET=localStorage.getItem("carBrand").split("_")[1];
          obj.MODEL=localStorage.getItem("carBrand").split("_")[2];
          obj.SICON=localStorage.getItem("icon");
          obj.CAR_LOGO_URL="http://121.40.78.200/pic/carLogo/";
          this.$store.dispatch('setCarId', localStorage.getItem("carBrandId"));
          this.$store.commit("changeDefaultCatAllInfo",obj);

          if (!!localStorage.getItem('localLngLat')) {// local有定位信息
            this.cityName = localStorage.getItem('cityName');
            this.positionLL = localStorage.getItem('localLngLat');
          }
          /*else {//百度定位
            this.getLocationPlace();
          }*/

          this.getCarModel();
        }
        else{
          this.titleMess="请先选择你的车辆信息"
        //   MessageBox('提示', '请添加车辆').then(action => {


        //     localStorage.setItem("flag","banpen");   //用来设置carModel.jsp点击后到底是去编辑，添加，还是查看服务的页面
        //     localStorage.setItem("fromSpray","1");  //表示来自新的钣喷,点击查看服务时直接跳转到新钣喷页
        //     // localStorage.setItem("spray","http://localhost:8089/#/");
        //     location.href=this.$store.state.ip+"/CARNT/jsp/maintain/carBrand.jsp?act=null,null";

        //   });
        }

        return;
      }
    },
    // 点击遮罩层提示消息
    alertMess(){
      if(this.noLogin){
          MessageBox('提示', '请添加车辆').then(action => {
            localStorage.setItem("flag","banpen");   //用来设置carModel.jsp点击后到底是去编辑，添加，还是查看服务的页面
            localStorage.setItem("fromSpray","1");  //表示来自新的钣喷,点击查看服务时直接跳转到新钣喷页
            // localStorage.setItem("spray","http://localhost:8089/#/");
            localStorage.setItem("backAddress",this.$store.state.ip+"/CARNT/jsp/pay/index.html#/");
            location.href=this.$store.state.ip+"/CARNT/jsp/maintain/carBrand.jsp?act=null,null";

          });
      }
    },
    /*
    carBrandId: 7
	carSetId: 377
	carModelId: 23835
     */
    // 2.获取默认车辆
    getDefaultCar () {
      let that=this;
      //this.getCarModel()
      this.getCarId = '23835'
      console.log(this.getCarId)
      if (this.getCarId == '') {//store中没有默认车辆 --> 去获取
      	console.log('>>>>>>')
        this.titleMess="获取车辆信息中...";
        this.$http.post(this.getIp + "/CARNT/UserWeb/getCars",{USER_ID:this.loginKey},{emulateJSON:true})
        .then(function (res) {
          var data = res.body;
          data.CARS=data.CARS.filter(function(item){
            return item.BRAND!="未设置";
          })
          if (data.STATUS_CODE == 1) {// 成功
            //console.log('我的车辆',data.CARS)//名下车辆
            if (data.CARS.length == 0) {
              that.nocar=true;
              that.titleMess="请添加车辆";
              MessageBox('提示', '请先添加车辆').then(action => {
                //this.$router.push('/chooseCar');
                //车网通carModel.jsp中所需要的获取的flag来控制其跳转
                localStorage.setItem("flag","mycar");
                localStorage.setItem("backAddress",this.$store.state.ip+"/CARNT/jsp/pay/index.html#/");

                location.href=this.$store.state.ip+"/CARNT/jsp/maintain/carBrand.jsp";
              });
              return;
            } else {

              // 取得默认车辆 查询车辆信息
              var loginkey  = getCookie("loginkey"),
                  defaultId = escape( getCookie(loginkey) ).split('%')[0],//默认车辆id（cookie以百分号分割，默认第一个）如1425
                  defaultCarIndex = null,//默认车辆在data.CARS中的索引
                  defaultCarInfo = null;//默认车信息
              if (!!localStorage.getItem('addCarId')) {// 本地存有默认车辆id改变默认车辆
                defaultId = localStorage.getItem('addCarId')

                // 根据默认车id 获取详细信息（车辆列表返回为数组[Object,Object,Object]）
                for (var i = 0,len = data.CARS.length; i < len; i++) {
                  if( data.CARS[i].CAR_ID == defaultId ){
                    defaultCarInfo = data.CARS[i];
                  }
                }
                // 存在默认车辆id 但是与返回车辆列表比对不成功时 设置第一辆为默认
                if ( defaultCarInfo == null ) {
                  defaultCarInfo = data.CARS[0];
                }
              } else {
                defaultCarInfo = data.CARS[0];
              }
              defaultCarInfo.CAR_LOGO_URL = data.CAR_LOGO_URL;
              // 设置store车辆默认id
              this.$store.dispatch('setCarId', defaultId);

              localStorage.setItem("selectIds",defaultId);
              //console.log(defaultId)
              // 设置store车辆默认所有信息
              this.$store.dispatch('setDefaultCatAllInfo', defaultCarInfo);
/*            console.log('0',defaultCarInfo)
              console.log('1',defaultCarInfo.BRAND,'2',defaultCarInfo.SET,'3',defaultCarInfo.MODEL)
*/
              // 3.定位
              if (!!localStorage.getItem('localLngLat')) {// local有定位信息
                this.cityName = localStorage.getItem('cityName');
                this.positionLL = localStorage.getItem('localLngLat');
              } /*else {//百度定位
                this.getLocationPlace();
              }*/
              // 4.获取车辆部位信息
              this.getCarModel();

            }
          } else {
            MessageBox('提示', '获取车辆出错，请稍后再试！');
            that.canClick = false;
            return;
          }
        },function (res) {
          MessageBox('提示', '出了点错误，请稍后再试');
          that.canClick = false;
          return;
        });
      } else {// store 中有默认车辆 直接拿信息 do nothing

        // 3.定位
        if (!!localStorage.getItem('localLngLat')) {// local有定位信息
          this.cityName = localStorage.getItem('cityName');
          this.positionLL = localStorage.getItem('localLngLat');
        } /*else {//百度定位
          this.getLocationPlace();
        }*/
        // 4.获取车辆部位信息
        this.getCarModel();
      }
    },
    // 定位
    getLocationPlace  () {
      var that = this;
      Indicator.open();
      this.$http.jsonp('http://api.map.baidu.com/location/ip?ak=f7GpjqXB2NkRGlzqIqywWTbo&coor=bd09ll')
      .then((res) => {
          // success callback
          let data = res.body;

          // 坐标处理
          console.log('aaaa')
          console.log('坐标：'+ data.content.point.x +','+ data.content.point.y );

          that.positionLL = data.content.point.x+ ',' + data.content.point.y;
          that.$store.commit("alterLgnLat",that.positionLL);// 存store
          localStorage.setItem('localLngLat',that.positionLL);// 存local

          // 城市处理
          console.log('城市：'+ data.content.address_detail.city);
          let city = data.content.address_detail.city;
          let citys = data.content.address_detail.city.split("").slice(0,city.length-1).join("");
          that.cityName=citys;

          that.$store.commit("alterCity",citys);
          that.$store.dispatch('setLocation',true);// 存store
          localStorage.setItem("cityName",citys);// 存local

          Indicator.close();
      }, (res) => {
          // error callback
          console.log('定位失败');
      });
      // 百度地图API功能
/*      Indicator.open();
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){// 获取经纬
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          console.log('您的位置：'+r.point.lng+','+r.point.lat);
          that.positionLL = r.point.lng + ',' + r.point.lat;

          that.$store.commit("alterLgnLat",that.positionLL);// 存store
          localStorage.setItem('localLngLat',that.positionLL);// 存local

          var geoc = new BMap.Geocoder();
          var point = new BMap.Point(r.point.lng,r.point.lat);

          geoc.getLocation(point, function(rs){// 通过经纬获取城市
            var city = rs.addressComponents.city;
            console.log('您的位置：'+city);
            let citys=city.split("").slice(0,city.length-1).join("");
            that.cityName=citys;

            that.$store.commit("alterCity",citys);
            that.$store.dispatch('setLocation',true);// 存store
            localStorage.setItem("cityName",citys);// 存local

            Indicator.close();
          });
        }
        else {
          alert('failed'+this.getStatus());
        }
      },{enableHighAccuracy: true})*/

    },

    // 获取车辆部位信息
    getCarModel () {
      var that = this;
      console.info(this.getDefaultCatAllInfo)
      // 获取当前车辆钣喷价格
      this.$http.post(this.getIp + "/CARNT/sprayWeb/getSpraySolution",{
           CAR_BRAND: '本田',
			CAR_SET: 'CR-V',
			CAR_MODEL: '2015款 2.0L 四驱风尚版',
			COORDINATE: '',
			CITY: '深圳',
        },{emulateJSON:true})
      .then(function (res) {
        //console.log(res.body);
        var data = res.body;
        if (data.STATUS_CODE == 1) {// success
          // 判断车型
          if (data.RESULT_DATA.DATA.length == 0) {
            MessageBox('提示', '该车型在该城市不支持钣喷！');//////////////////////////////
            that.canClick = false;
            return;
          }

          if (data.RESULT_DATA.MODELS == 1) {//三厢车
            that.carType = '1';
          } else if (data.RESULT_DATA.MODELS == 2) {// 两厢车
            that.carType = '2';
          }


        } else {
          MessageBox('提示', '获取钣喷部位价格失败！');
          that.canClick = false;
          return;
        }
        // 5.获取完喷漆部位后，开始处理点击事件
        that.handlePartsData(data);

      },function (res) {
        MessageBox('提示', '出了点错误，请稍后再试！');
        that.canClick = false;
        return;
      });
    },

    // 处理钣喷部位数组
    handlePartsData (data) {
      console.log('钣喷数组',data);
      this.defaultStore = data.RESULT_DATA.COMP_ID// 设置默认商店
      //alert(data.RESULT_DATA.COMP_ID)
      this.banpenData = data.RESULT_DATA.DATA;// 设置钣喷数据
      let OBJ = {}
      for(let i  = 0; i < this.banpenData.length; i++) {
      	OBJ[this.banpenData[i].POSITION] = this.banpenData[i]
      }
      console.log(OBJ)
      this.banpenData2 = OBJ
      //alert(data.RESULT_DATA.DATA)
      this.canClick = true;//允许点击
      // 切换车辆回来需要获取优惠券
      if (this.actInfo.CASHVOL_AVL == 1 && !this.noLogin == true) {
        this.getCashRedux();
      }
    },

    // 添加/除去车身/车轮 钣喷部位
    addParts (index) {
       // console.log(this.hasSelectParts)
      // 车身
      if (index != 'a' && index != 'b' && index != 'Y' && index != 'Z' && index != 'ALL') {
        //如果目前购物车为ALL状态
        if (this.hasSelectParts.indexOf('ALL') !== -1) {
          this.hasSelectParts = ['O','E','G','H','L','S','T','U','C','B','P','Q','A','K','M','N','D','F','I','J','V','W','X'];
        }
        // 该部位已被选择，则去掉
        if (this.hasSelectParts.indexOf(index) !== -1) {
          this.hasSelectParts.splice(this.hasSelectParts.indexOf(index),1);
        } else {// 未选则加入
          this.hasSelectParts.push(index);
        }
        // console.log(this.hasSelectParts);
        this.checkChooseAll();

      } else if (index == 'ALL') {
        console.log(this.hasSelectParts)
        if (this.hasSelectParts.indexOf(index) !== -1) {
          this.hasSelectParts = []
          this.allSelect = false
          // this.hasSelectParts.splice(this.hasSelectParts.indexOf(index),1);
        } else {// 未选则加入
          // this.hasSelectParts.push(index);
          this.hasSelectParts = ['ALL']
          this.allSelect = true
        }
        // this.allSelect = true
        // console.log(this.hasSelectParts);
        // this.checkChooseAll();

      } else {//轮子
        // 该部位已被选择，则去掉
        if (this.wheelSelectParts.indexOf(index) !== -1) {
          this.wheelSelectParts.splice(this.wheelSelectParts.indexOf(index),1);
        } else {// 未选则加入
          this.wheelSelectParts.push(index);
        }
      }

      // （可用代金券情况下）每次增减部位，获取后台计算的代金券金额 || 未登录
      if (this.actInfo.CASHVOL_AVL == 1 && !this.noLogin == true) {
        this.getCashRedux();
      }

      if (this.shoppingCarList.length == 0) this.carListShow = false;
    },

    // 检查是否全选
    checkChooseAll () {
      if (this.hasSelectParts.length == 23) {//全点上
        //this.hasSelectParts = ['O','E','G','H','L','S','T','U','C','B','P','Q','A','K','M','N','D','F','I','J','V','W','X'];
        this.hasSelectParts = ['ALL'];
        this.activityRedux = 0; // 不显示活动优惠价格
        this.allSelect = true;
      } else {
        this.allSelect = false;
      }
    },

    // 全选按钮改变
    changeAllChooseBtn (type) {
      var that = this;
      // SB UC浏览器非得这样写 无解
      function seclectAllForSB_UC (){
        setTimeout(function () {
          if (that.allSelect) {
            that.activityRedux = 0;// 全选不显示活动的优惠价格
            that.hasSelectParts = ['ALL'];
            that.allSelect = true;
            if (that.actInfo.CASHVOL_AVL == 1 && !that.noLogin == true) {
              that.getCashRedux();
            }
          }else{
            that.allSelect = false;
            that.hasSelectParts = [];
          }
        },100)
      }
      //alert(navigator.userAgent)
      if ( navigator.userAgent.indexOf('UCBrowser') != -1 || navigator.userAgent.indexOf('QQBrowser') != -1) {
        seclectAllForSB_UC();
      }else{
        if (that.allSelect) {
          that.activityRedux = 0;// 全选不显示活动的优惠价格
          that.hasSelectParts = ['ALL'];
          if (type == 2) {
          	that.allSelect = false;
          } else {
          	that.allSelect = true;
          }
          
          if (that.actInfo.CASHVOL_AVL == 1 && !that.noLogin == true) {
            that.getCashRedux();
          }
        }else{
            if (type == 2) {
          	that.allSelect = true;
          } else {
          	that.allSelect = false;
          }
          that.hasSelectParts = [];
        }
      }
      console.log(this.hasSelectParts);
    },

    // 清空所有
    clearAll () {
      this.hasSelectParts = [];
      this.wheelSelectParts = [];
      this.carListShow = false;
      this.allSelect = false;
    },
    // 获取推荐代金券
    getCashRedux () {
      // alert();
      var that = this,
          serv = [],
          allSelectPartsLen = this.allSelectParts.length,
          banpenDataLen = this.banpenData.length;
      for (var i = 0; i < allSelectPartsLen; i++) {
        //console.log('ai',this.allSelectParts)
        for (var y = 0; y < banpenDataLen; y++) {
          if ( this.allSelectParts[i] == this.banpenData[y].POSITION) {
            let thisData = {
              "SERV_ID": this.banpenData[y].SERV_DETAIL_ID,// 部位ID
              "QUANTITY": "1"//,"MARK": "1"
            }
            serv.push(thisData);
          }
        }
      }
      var getUserAvailableCashVolData = {
        USER_ID:getCookie('loginkey'),
        COMP_ID:this.defaultStore,//订单所属的商店编号
        USED_CASH_VOL_NO:'',
        SERV_PARAMS:serv
      }
      console.log('longgggggggggg',serv)
      Indicator.open();
      this.$http.post(this.getIp + "/CARNT/CashVolumeWeb/getUserAvailableCashVol",{
        jsonParams:JSON.stringify(getUserAvailableCashVolData)
      },{emulateJSON:true})
      .then(function (res) {
        Indicator.close();
        console.log(res.body);
        var data = res.body;
        if (data.STATUS_CODE == 1) {// 成功
          that.defaultCash = data.ON_SALE_PRICE; //设置推荐优惠金额
        }

      },function (res) {
        MessageBox('提示', '获取代金券失败');
        return;
      });

    },

    //购物车详情
    showCarList () {
      if (!!!this.shoppingCarList.length) return;//购物车没东西不显示
      this.carListShow = !this.carListShow;
    },

    //车辆选择跳转
    toChooseCar () {
      console.log(this.noLogin)
      if(this.noLogin){
            localStorage.setItem("flag","banpen");   //用来设置carModel.jsp点击后到底是去编辑，添加，还是查看服务的页面
            localStorage.setItem("fromSpray","1");  //表示来自新的钣喷
            localStorage.setItem("backAddress",this.$store.state.ip+"/CARNT/jsp/pay/index.html#/");
            location.href=this.$store.state.ip+"/CARNT/jsp/maintain/carBrand.jsp?act=null,null";
      }else{
        if(this.nocar){
              localStorage.setItem("flag","mycar");
              localStorage.setItem("backAddress",this.$store.state.ip+"/CARNT/jsp/pay/index.html#/");
              location.href=this.$store.state.ip+"/CARNT/jsp/maintain/carBrand.jsp";
        }else{
              this.$router.push('/chooseCar');
        }
      }
    },

    //分时优惠，是否下一步
    nextFenshi () {
      //判断车身、车轮数组是否有东西
      if ((this.hasSelectParts.length !=0) || (this.wheelSelectParts.length != 0)) {
        //store 设置部位
        //this.$store.dispatch('setPartsOfChoose',this.hasSelectParts);
        //this.$store.dispatch('setPartsOfChooseW',this.wheelSelectParts);
        if(this.shouG.length>0||this.shouP.length>0){
          localStorage.setItem('PartsOfChoose',JSON.stringify(this.shouP));// 车身
          localStorage.setItem('PartsOfChooseW',JSON.stringify(this.shouG));// 车轮
        }else{
          localStorage.setItem('PartsOfChoose',JSON.stringify(this.hasSelectParts));// 车身
          localStorage.setItem('PartsOfChooseW',JSON.stringify(this.wheelSelectParts));// 车轮
        }
        // localStorage.setItem('PartsOfChoose',JSON.stringify(this.hasSelectParts));// 车身
        // localStorage.setItem('PartsOfChooseW',JSON.stringify(this.wheelSelectParts));// 车轮
        localStorage.setItem('defaultCatAllInfo',JSON.stringify(this.getDefaultCatAllInfo));// 车信息
        // localStorage.setItem('localLngLat',this.getLgnLat);
        this.$router.push('/schedule');
      } else {
        MessageBox('提示', '您未选择钣喷部位');
      }

    },
    question (){
      location.href='http://carnt.carnettong.com:8088/CARNT/desc/spray.jsp';
    },
    // 去客服
    goCustomerService () {
      location.href = 'http://carnt.carnettong.com:8088/CARNT/jsp/pay/indexM.html#/customerService'
    }
    // 添加车轮钣喷部位
/*    addWheel (index) {
      // 该车轮已被选择，则去掉
      if (this.wheelSelectParts.indexOf(index) !== -1) {
        this.wheelSelectParts.splice(this.wheelSelectParts.indexOf(index),1);
      } else {// 未选则加入
        this.wheelSelectParts.push(index);
      }
      console.log('addWheel',this.wheelSelectParts);
    },*/
  },

  beforeRouteEnter (to, from, next){
    var imFrom = from.path;
    // ！！！ beforeRouteEnter 钩子 不能 访问 实例 this, 通过传一个回调给 next来访问组件实例
    next(vm =>{
      // 若从以下地址返回过来
      if (imFrom == '/chooseCity' || imFrom == '/chooseCar' /*|| imFrom == '/schedule'*/) {
        vm.getCarModel();
      }
    })
  },
  // 子组件
  components: {
    carntHeader
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

 .fade-enter-active,
  .fade-leave-active {
      transition: all .5s ease;    
  }
  .fade-enter,
  .fade-leave-active {
    transform: scale(0);
     transition: all .5s ease;    
  }
.wrap4 {
  padding: .1rem;
  h3 {
    font-size: .32rem;
    line-height: .6rem;
  }
  .img-group{
    ul {
      white-space: nowrap;
      overflow-x: scroll;
      li {
        display: inline-block;
        img {
          width: 1.5rem;
          margin-right: .1rem;
        }
      }
    }
  }
  .info1 {
    line-height: .8rem;
    img{
      width: .4rem;
      vertical-align: middle;
      margin: 0 .2rem;
    }
    p {
      font-size: 0.28rem;
      color:#666666;
      padding-left: 0.9rem;
    }
  }
}
.wrap3 {
  .box {
    padding: .1rem .2rem;
    span {
      display:inline-block;
      padding:0 0.2rem;
      line-height: .5rem;
      font-size: .26rem;
      border-radius: .25rem;
      background:#FFE6E6;
      margin-bottom: .2rem;
      margin-right: .2rem;
    }
  }
  .evaluate{
    padding: 0.1rem;
    font-size: .26rem;
    .e-header {
      margin-top: .2rem;
      height:.7rem;
      line-height: .7rem;
    }
    .e-info {
      line-height: .7rem;
    }
    .e-content {
      font-size: .24rem;
    }
    .e-reply {
      padding: .1rem;
      font-size: .24rem;
      color:#666666;
    }
    .e-img {
      display:flex;
      justify-content: space-between;
      img{
        width: 1.5rem;
        height: 1.5rem;
      }
    }
    .e-shop {
      font-size: .22rem;
      color: #666666;
      line-height: .5rem;
      border-bottom: 1px solid #cccccc;
    }
  }
}


.wrap2 {
  h3 {
    position: relative;
    line-height: .6rem;
    font-size: .44rem;
    padding-left: .2rem;
    &:before{
      content: '';
      background:red;
      position: absolute;
      width: .1rem;
      height: .6rem;
      left: 0;
      top: 0;
    }
  }
}

.header_info{
  border-bottom: 1px solid #666666;
  .tips {
    background:#FFEA87;
    font-size: .22rem;
    line-height: .4rem;
    padding-left: .2rem;
    text-align:center;
  }
  .bar {
    font-size: .26rem;
    height: .8rem;
    line-height: .8rem;
    padding: 0 .2rem;
    .btn-h {
      float:right;
      width: .8rem;
      height: .5rem;
      line-height: .5rem;
      margin-top: .15rem;
      border: 1px solid  red;
      text-align:center;
      color: red;
      border-radius: 5px;
    }
    img {
      width: .4rem;
      vertical-align:middle;
    }
  }
  .info_juan {
    position:relative;
    padding-left: .2rem;
    font-size: .26rem;
    border-top: 1px solid #cccccc;
     height: .6rem;
    line-height: .6rem;
    span{
      border: 1px solid red;
      display: inline-block;
      height: .4rem;
      line-height: .4rem;
      padding: 0 .1rem;
      border-radius: .2rem;
      color:red;
    }
    &:after {
      content:'';
      width: .2rem;
      height: .3rem;
      background: url('../assets/img/chooseCar/right.png');
      background-size: 100% 100%;
      position:absolute;
      right: .2rem;
      top:.15rem;
    }
  }
  .info_jian {
    position:relative;
    padding-left: .2rem;
    font-size: .26rem;
     height: .6rem;
    line-height: .6rem;
      img {
        width: .3rem;
        vertical-align: middle;
      }
    &:after {
      content:'';
      width: .2rem;
      height: .3rem;
      background: url('../assets/img/chooseCar/right.png');
      background-size: 100% 100%;
      position:absolute;
      right: .2rem;
      top:.15rem;
    }
  }
}



// tab
.myTab {
	height: 1rem;
	.tabWrap {
		height: 1rem;
		text-align:center;
		border-bottom: 1px solid #dbdbdb;
		span {
			box-sizing:border-box;
			display: inline-block;
			width: 1.2rem;
			height: 1rem;
			line-height: 1rem;
			&.active{
				border-bottom: 2px solid #FF3333;
			}
		}
	}
}
// 切换模式
.changeModel {
  width:100%;
  position:relative;
  height:1rem;
  text-align:center;
  div{
    position:absolute;
    left:50%;
    top:.1rem;
    width: 3rem;
    height: .8rem;
    transform:translateX(-50%);
    span{
      box-sizing: border-box;
      display:inline-block;
      width:1.5rem;
      height: .8rem;
      line-height:.8rem;
      float:left;
      border: 1px solid #E42E3B;
      &:nth-child(1) {
      	border-right: none;
      }
      &.active {
      	background: #E42E3B;
      	color: #ffffff;
      }
    }
  }
}
// 文字模式
.textModel {
	position:relative;
	
	margin-bottom: 1rem;

  p {
    //border-bottom: 1px solid #dbdbdb;
    line-height: .8rem;
    font-size: .3rem;
    font-weight: 700;
    padding-left: .2rem;
    span {
      background:red;
      border-radius: 50%;
      color:#ffffff;
      display:inline-block;
      width: .35rem;
      height: .35rem;
      line-height: .35rem;
      text-align:center;
    }
  }

  .model {
    overflow: hidden;
    transition: height .4s  ease-out;
    &.active{
    }
    .item{
      position:relative;
      line-height: .8rem;
      padding-left: 1rem;
      &:before{
        content: '';
        position: absolute;
        top:.2rem;
        left: .3rem;
        width: .4rem;
        height: .4rem;
        background: url('../assets/img/chooseCar/noChecked.png') no-repeat;
        background-size: 100% 100%;
      }
      &.active{
         &:before{
          content: '';
          position: absolute;
          top:.2rem;
          left: .3rem;
          width: .4rem;
          height: .4rem;
          background: url('../assets/img/chooseCar/Checked.png') no-repeat;
          background-size: 100% 100%;
        }
      }
        del{
          float: right;
          color: #999999;
          width: 1rem;
          font-size: .26rem;
        }
        span {
          float: right;
          font-size: .3rem;
          color: #E42E3B;
          width: 1rem;
          font-weight:600;
        }
      }
  }
	/*.box-left {
		position:absolute;
		top:0;
		width:1.5rem;
		left: 0;
		li {
			height: 1rem;
			line-height: 1rem;
			text-align:center;
			.tit {
				display:block;
				&.active {
					background: #cccccc;
				}
			}
		}
		.model {
			position: absolute;
			left: 1.5rem;
			width: 6rem;
			background:#ffffff;
			top: 0;
			height: 5rem;
			overflow-y:scroll;
			.item{
				&.active {
					background:#54AC5F;
				}
				del{
					float: right;
					color: #999999;
					width: 1rem;
				}
				span {
					float: right;
					font-size: .56rem;
					color: #E42E3B;
					width: 1rem;
					font-weight:600;
				}
			}
		}
	} */
}

/* title高度 */
@titleHeight:.8rem;
/* 车辆信息高度 */
@carInfoHeight:1.15rem;
.spray{
  background:#ffffff;
  width:7.5rem;
  margin-bottom:1rem;
  font-size:.3rem;
}
.cityChoose a{
  margin-right: .1rem;
}
.cityChoose:after{
  content:'';
  display:inline-block;
  width:.2rem;
  height:.16rem;
  background:url(../assets/img/spray/cityArrow.png) no-repeat;
  background-size:.20rem .12rem;
}
.forIcon{
  height:@titleHeight;
  width:.6rem;
  float: right;
  position: relative;
  i{
    width:.36rem;
    height:.36rem;
    position: absolute;
    display:inline-block;
    top:50%;
    left:50%;
    margin-left:-.18rem;
    margin-top:-.18rem;
  }
  .ask{
    background:url(../assets/img/spray/ask.png) no-repeat center;
    background-size:.34rem .36rem;
  }
  .service{
    background:url(../assets/img/spray/service.png) no-repeat center;
    background-size:.40rem .36rem;
    width:.40rem;
  }
}
/* 当前车辆信息 */
.setMyCar{
  height:@carInfoHeight;
  background:#fff;
  width: 7.5rem;
  .gettingCarInfo{/* 获取车辆信息中 */
    height:1.15rem;
    line-height:1.15rem;
    text-align:center;
    font-size:.33rem;
  }
  .picBox{
    width:1rem;
    height:@carInfoHeight;
    float:left;
    div{
      width:1rem;
      height:@carInfoHeight;
      display:table-cell;
      text-align:center;
      vertical-align:middle;
      img{
        width:.6rem;
      }
    }

  }
  .carInfo{
    width:6rem;
    height:@carInfoHeight;
    float:left;
    padding:.15rem 0 0 .15rem;
    h3{
      font-weight:500;
      font-size:.28rem;
      margin-top: 0.1rem;
    }
    p{
      margin-top:.03rem;
      font-size:.22rem;
    }
    .noCard{
      line-height: .7rem;
      font-size: .25rem;
    }
  }
  .carArrow{
    width:.5rem;
    float:left;
    height:@carInfoHeight;
    line-height:@carInfoHeight;
    text-align:center;
    background:url(../assets/img/spray/carArrow.png) no-repeat center;
    background-size: .2rem @carInfoHeight/3;

  }
}
/* 选区下方文字 */
.bottomWord{
  font-size:.26rem;
  text-align:center;
  line-height:.6rem;
  width: 7.5rem;
  color:#535655;
  .colorful{
    width:.5rem;
    height:.5rem;
    display:inline-block;
    text-align:center;
    line-height:.5rem;
    border-radius:50%;
    color:#fff;

  }
  .orangeSpan{
    background:#ff7e00;
  }
  .allFanWord{
    position: relative;
    .selectorInp{
      position: absolute;
      transform: scale(1) translateY(-50%);
      top: 50%;
    }
  }
  .redSpan{
    background:#fd2503;
  }
}
/* 底端固定条 */
.shoppingCar{
  height:1rem;
  color:#fff;
  width:7.5rem;
  background:#2b2b2b;
  position: fixed;
  bottom:0;
  z-index:11;
  .carIcon{
    width:1.2rem;
    height:1rem;
    float:left;
    position: relative;
    .carIconBox{
      width:.9rem;
      height:.9rem;
      border-radius:50%;
      position: absolute;
      right:.15rem;
      bottom:.1rem;
      transition: all .5s;
      img{
        width:.5rem;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate3d(-50%,-50%,0);
      }
      &.hasGoods{
        transform: translateY(-.2rem);
        background:#151515;
      }
      .goodsNub{
        background:#fd2503;
        color:#fff;
        font-size:.25rem;
        display:block;
        position: absolute;
        right:-.05rem;
        top:-.05rem;
        height:.3rem;
        text-align:center;
        line-height:.3rem;
        border-radius:.16rem;
        min-width:.3rem;
        padding:.02rem;
      }
    }
  }
  .shoopingCarDet{
    .oneLine{
      line-height:1rem;
      color:#b6b6b6;
      font-size:.25rem;
    }
    .twoLine{
      h3{
        margin:.1rem 0 .05rem 0;
        font-size:.3rem;
      }
      p{
        line-height:.3rem;
        font-size:.25rem;
        color:#b6b6b6;
      }
    }
  }
  .toChooseTime{
    height:1.04rem;
    width:2.5rem;
    font-size: .25rem;
    background:#e42e3b;
    position: absolute;
    right:0;
    top:0;
    text-align:center;
    line-height:1rem;
  }
}
/* 购物车详情 */
.shoppingCarListMask{
  position: fixed;
  top:0;left:0;bottom:0;right:0;
  background:#000;
  opacity:0.5;
  z-index:10;
}
.shoppingCarList{
  position: fixed;
  left:0;
  bottom:1rem;
  z-index:11;
  background:#fff;
  .listView{
    border-bottom: 1px solid #ddd;
    padding:.23rem;
    span.cartviewSpcar{
      padding-left: .1rem;
      border-left: .1rem solid #e42e3b;
      color:#333;
    }
    /* 清空购物车 */
    .cartviewClear{
      float:right;
      color:#686868;
    }
    .clearAllList{
      position: relative;
    }
    .clearAllList:before{
      content:'';
      width:.36rem;
      height:.38rem;
      position: absolute;
      left:-.38rem;
      top:50%;
      background:url(../assets/img/spray/removeAll.png) no-repeat;
      background-size:.36rem .38rem;
      display:block;
      transform: translateY(-50%);
    }
  }
  ul.sclList{
    width:7.5rem;
    max-height:4rem;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
    li{
      width:7.5rem;
      height:.8rem;
      borde-bottom:1px solid #d7d7d7;
      padding:0 .23rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      span.cartviewLeft{
        -webkit-box-flex: 7;
        -ms-flex: 7;
        flex: 7;
        display: block;
        width: 0;
        line-height: normal;
        color:#000;
      }
      span.cartviewRight{
        -webkit-box-flex: 5;
        -ms-flex: 5;
        flex: 5;
        display: block;
        width: 0;
        text-align:right;
        line-height: normal;

        .priceOld{
          font-size:.25rem;
          line-height:.5rem;
        }
        .priceNow{
          font-size:.3rem;
          color:#f31616;
          line-height:.5rem;
          padding-right:.1rem;
        }
      }
        .removeList{
          width:.37rem;
          height:.37rem;
          display:inline-block;
          background:url(../assets/img/spray/removeParts.png) no-repeat;
          background-size: .37rem .37rem;
        }
    }
  }
}
/*checkbox*/
.c{
  width: .8rem;
  height: .46rem;
  background: #fff;
  border-radius: .23rem;
  position: relative;
  display:inline-block;
  border:1px solid #acacac;
  vertical-align: middle;
}
.c input{
  width: 100%;
  height: 100%;
  opacity: 0;
}
.c label{
  width: .8rem;
  height:.46rem;
  display: block;
  position: absolute;
  border-radius: .23rem;
  top: 0;
  left: 0;
  -webkit-transition: background .3s ease-in;
  transition: background .3s ease-in;
}
.c label:before{
  content: '';
  width: .16rem;
  height: .16rem;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: .13rem;
  left: .52rem;
  border:1px solid #acacac;
}
.c label:after{
  content: '';
  width: .47rem;
  height: .47rem;
  border-radius: 50%;
  display: block;
  background: #fff;
  position: absolute;
  box-shadow: 0 0 .05rem #ccc;
  top: -1px;
  left: -1px;
  -webkit-transition: left .3s ease-in;
  transition: left .3s ease-in;
  box-shadow:1px 0px .1rem #ccc;
}
.c input:checked+label{
  background: #ff8000;
}
.c input:checked+label:after{
  left: .34rem;
}
/* 过渡 */
.maskFade-enter-active, .maskFade-leave-active {
  transition: opacity .3s
}
.maskFade-enter, .maskFade-leave-active {
  opacity: 0
}
.listFade-enter-active, .listFade-leave-active {
  transition: all .3s
}
.listFade-enter, .listFade-leave-active {
  transform: translateY(100%);
}
/* 选择模块 */
.chooseParts{
  width:700px;
  margin:0 auto;
  position: relative;
  .textFront{
    text-align:center;
    line-height:80px;
    font-size: 30px;
  }
  &:before{
    content:'左';
    display:block;
    position: absolute;
    top:49%;
    left:-15px;
    font-size: 30px;
  }
  &:after{
    content:'右';
    display:block;
    position: absolute;
    top:49%;
    right:-15px;
    font-size: 30px;
  }
  .mainChooseParts{
    width:700px;
    min-height:698px;
    position: relative;
    .touchImg{
      position: absolute;
      top:0;
      left:0;
      z-index:6;
    }
  }
}
/* 喷漆选择块 */
.spray_part{
  position: absolute;
  pointer-events:none;
  /*z-index:5;*/
  img{
    width:100%;
  }
}


/* 三厢车-左 */
.spray_l_1{width: 39px;top: 223px;left: 3px;}
.spray_l_2{width: 95px;top: 63px;left: 34px;}
.spray_l_3{width: 90px;top: 236px;left: 46px;}
.spray_l_4{width: 89px;top: 409px;left: 46px;}
.spray_l_5{width: 90px;top: 518px;left: 46px;}
.spray_l_6{width: 78px;top: 212px;left: 145px;}
.spray_l_7{width: 63px;top: 404px;left: 140px;}
.spray_l_8{width: 105px;top: 409px;left: 127px;}
/* 三厢车-中 */
.spray_m_1{width: 224px;top: 3px;left: 236px;}
.spray_m_2{width: 220px;top: 47px;left: 240px;}
.spray_m_3{width: 75px;top: 97px;left: 158px;}
.spray_m_4{width: 76px;top: 95px;left: 465px;}
.spray_m_5{width: 169px;top: 323px;left: 265px;}
.spray_m_6{width: 193px;top: 636px;left: 256px;}
.spray_m_7{width: 192px;top: 707px;left: 255px;}
/* 三厢车-右 */
.spray_r_1{width: 39px;top: 223px;left: 659px;}
.spray_r_2{width: 96px;top: 63px;left: 571px;}
.spray_r_3{width: 89px;top: 237px;left: 565px;}
.spray_r_4{width: 88px;top: 409px;left: 565px;}
.spray_r_5{width: 91px;top: 518px;left: 564px;}
.spray_r_6{width: 78px;top: 211px;left: 481px;}
.spray_r_7{width: 61px;top: 403px;left: 499px;}
.spray_r_8{width: 110px;top: 411px;left: 463px;}
/* 三厢轮子 */
.wheel_l_1{width: 74px;top: 119px;left: 13px;}
.wheel_l_2{width: 74px;top: 555px;left: 13px;}
.wheel_r_1{width: 74px;top: 119px;left: 614px;}
.wheel_r_2{width: 74px;top: 555px;left: 614px;}

/* 两厢车-左 */
.spray_two_l_1{width: 26px;top: 209px;left: 25px;}
.spray_two_l_2{width: 105px;top: 59px;left: 39px;}
.spray_two_l_3{width: 92px;top: 220px;left: 57px;}
.spray_two_l_4{width: 91px;top: 392px;left: 58px;}
.spray_two_l_5{width: 90px;top: 492px;left: 57px;}
.spray_two_l_6{width: 85px;top: 187px;left: 147px;}
.spray_two_l_7{width: 66px;top: 388px;left: 153px;}
.spray_two_l_8{width: 79px;top: 407px;left: 153px;}
/* 两厢车-中 */
.spray_two_m_1{width: 207px;top: 2px;left: 247px;}
.spray_two_m_2{width: 205px;top: 44px;left: 249px;}
.spray_two_m_3{width: 70px;top: 89px;left: 173px;}
.spray_two_m_4{width: 71px;top: 87px;left: 459px;}
.spray_two_m_5{width: 158px;top: 300px;left: 273px;}
.spray_two_m_6{width: 179px;top: 593px;left: 264px;}
.spray_two_m_7{width: 179px;top: 660px;left: 263px;}
/* 两厢车-右 */
.spray_two_r_1{width: 26px;top: 209px;left: 650px;}
.spray_two_r_2{width: 105px;top: 59px;left: 557px;}
.spray_two_r_3{width: 92px;top: 219px;left: 551px;}
.spray_two_r_4{width: 92px;top: 391px;left: 551px;}
.spray_two_r_5{width: 90px;top: 492px;left: 552px;}
.spray_two_r_6{width: 86px;top: 187px;left: 468px;}
.spray_two_r_7{width: 66px;top: 388px;left: 481px;}
.spray_two_r_8{width: 78px;top: 407px;left: 469px;}
/* 两厢轮子 */
.wheel_two_l_1{width: 77px;top: 106px;left: 13px;}
.wheel_two_l_2{width: 77px;top: 527px;left: 13px;}
.wheel_two_r_1{width: 77px;top: 105px;left: 610px;}
.wheel_two_r_2{width: 77px;top: 527px;left: 610px;}
/*不满足条件不许点击*/
.canClick{
  position: fixed;
  top:1.95rem;
  left:0;
  bottom:0;
  right:0;
  opacity:0;
  z-index:1222;
}





</style>
